I tried to use to get /register but it's not showing.
No route found for "GET /register" 404 page not found.
Here is my code routing.yml:
user_registration:
path: /register
defaults: { _controller: AppBundle:Registration:register }
Please tell how to overcome this error? Thanks
Related
Vue.js
{ path: '/authenticate/:id', component: authenticate },
URL- http://localhost:8080/authenticate/test.qwerty
Error - Cannot GET /authenticate/test.querty
If URL - http://localhost:8080/authenticate/test
It works fine.
If the endpoint has a period(.) then not able to access the route. How to resolve this issue?
How can I create 404 error page with 404 response code in Vue? Here is the route for 404.
{
path: "*",
name: "404",
component: load("404"),
alias: "/404"
}
You won't be able to set the HTTP status code in a Single-Page Application - all the routing is done on the same page in the browser so once the page is loaded no more HTTP status codes will be received.
However, if you try to load a non-existent route by directly typing/copying the URL into the address bar of the browser - then you can use nginX (or whatever server software you are using) to signal 404 HTTP status:
server {
error_page 404 /404.html;
location / {
try_files $uri $uri/ =404;
}
}
But this is not a practical/wise approach - basically, you want every non-existent path to be resolved to /index.html so that your SPA is always loaded and once loaded - it will detect that this route does not exist and will render your 404 component.
So your nginX config should look like this:
server {
...
location / {
try_files $uri /index.html$is_args$args;
}
}
The $is_args variable will add ? if $args is not empty while $args will provide the query parameters (if any).
Your route definition looks ok, except that I don't know your load function does, i.e. how it resolves to a Vue component. But in general your code follows the common approach as described in the Vue router docs. Usually you won't need a name or an alias here since this route is not used explicitly. Just put in a component that shows your "not found" content and you should be good to go:
{
path: "*",
component: PageNotFound
}
Since this is very close to the code you provided, please explain what exactly gives you a problem.
Like IVO GELOV wrote, you have to force this on the server. I came across the issue with Apache (IVO GELOV provides help on nginx).
In the vue router (Vue 3):
const routes = [
{
// Your other routes here
// ...
{
path: '/404',
name: '404',
component: Error404,
},
{
path: '/:pathMatch(.*)*',
beforeEnter() { window.location.href = "/404" },
},
]
With the last route item, all non-matched routes will be redirected to /404. I use beforeEnter to avoid creating a component and window.location.href to get out of the Vue application.
In Apache .htaccess:
<IfModule mod_alias.c>
Redirect 404 /404
</IfModule>
This will add a 404 error code to the /404 url.
Then the /404 route from the vue router config will call the Error404 component that you have to define and import like any other Vue component!
This answer is heavily inspired by:
https://stackoverflow.com/a/62651493/14217548
Im currently, making a form, where I have a button, "Save and add another" , what I do, I validate the data and if saving is a success I'm trying to redirect the user to the same page but its not working(example: from this page http://localhost:8080/#/add_new_entity to this page http://localhost:8080/#/add_new_entity).
So far i've tried this:
this.$router.push('/add-new-entity')
i get this error:
NavigationDuplicated {_name: "NavigationDuplicated", name:
"NavigationDuplicated", message: "Navigating to current location
("/add_new_entity") is not allowed", stack: "Error↵ at new
NavigationDuplicated (http://loca…voker
(http://localhost:8080/js/app.js:135303:14)"}
And i know i could just refresh, but i have set in my router/index.js this: router.replace({ path: '/dashboard', redirect: '/dashboard' }) so every time the page is refreshed it automaticaly redirects to /dashboard.
Any solutions out there?
EDIT: I still havent found a solution for that. Yes this catches the error this.$router.push("/add-new-entry").catch(err => {}) so I dont get the error message and can handle it, but I'm still not able to redirect to the same page.
Just do this.$router.push("/add-new-entry").catch(err => {})
Despite of multiple posts on the subject I can't find what is going wrong. I been followed this example.
Here is my VueRouter instance.
const router = new VueRouter({
mode: "history",
routes: [
{
path: "/",
component: require("./components/producer-table.vue").default
},
{
path: "/producer/:producerId",
component: require("./components/variable-table.vue").default,
props: true
},
{ path: "*", redirect: "/" }
]
});
If I route to a wrong url programmatically (this.$router.push({path: "/wrong});) I am redirected to http://localhost/.
Everything seems to work fine except that when I set a wrong address in Chrome url bar I get the following message:
Cannot GET /wrong
I would expect http://localhost/wrong to be redirected to http://localhost/. I'm quite new using vue router and I'm must miss something. Any ideas?
This is because your webserver doesn't know GET /wrong should be redirected to the index.html file; from there on, vue-router can take over.
Some examples on how to redirect different web servers;
Apache: htaccess rewrite all to index.html
nginx: Rewrite all requests to index.php with nginx
webpack-dev-server:
/// in your webpack.config
devServer: {
historyApiFallback: {
index: '/'
}
}
I am looking for a way to always redirect to homepage when a page doesn't exist using Nuxt.Js.
Our sitemap generation had some problems a few days back and we submitted wrong urls that do not exist. Google Search Console shows a big number of 404 and we want to fix them with 301 redirect to homepage.
I tried this
created() {
this.$router.push(
this.localePath({
name: 'index',
query: {
e: 'er'
}
})
)
}
and although the page redirects to homepage successfully I think Google will have problems with this since the pages initially renders with 404.
I also tried this
async asyncData({ redirect }) {
return redirect(301, '/el?e=rnf')
},
but didn't work (same with fetch)
Any ideas on a solution to this?
Never redirect to home if page is not found as you can see in this Google's article: Create custom 404 pages
instead, redirect to 404 error page
Just use error
async asyncData({ params, $content, error }) {
try {
const post = await $content('blog', params.slug).fetch()
return { post }
} catch (e) {
error({ statusCode: 404, message: 'Post not found' })
}
}
do not forget to creat an error page in layout folder error.vue
You are able to create a default 404-page in nuxt - just put a file with a name _.vue in your ~/pages/ dir. This is your 404-page :)
or you can use another method to create such page: https://github.com/nuxt/nuxt.js/issues/1614 but I have not tried it
Then add a simple 404-redirect-middleware to this page:
// !!! not tested this code !!!
middleware: [
function({ redirect }) {
return redirect(301, '/el?e=rnf')
},
],
Personally I would advise to create a 404 page which provides a better user experience in comparison to being redirected to a homepage and potentially being confused about what happened.
In order to create a custom error page, just create error.vue file in the layouts folder and treat it as a page. See the official documentation. We've implemented this plenty of times and Google has never complained about it.
Still, gleam's solution is clever and if it serves the purpose, very well. Just wanted to point out another solution.
If you need to provide custom routes to your users like domain.com/<userID>
then putting a file with a name _.vue in your ~/pages/ directory will not work, because you'll need it for your custom user routes.
For maximum flexibility use the layouts folder as mentioned by Dan
Create a file called _.vue at pages directory with content:
<script>
export default {
asyncData ({ redirect }) {
return redirect('/')
}
}
</script>