I'm new to vuejs and I'm working on my first project with vue. I'm just wondering how I will route to my 404.vue component when the requested url is not found.
Any Idea?
-
3Possible duplicate of Vue-router redirect on page not found (404)PatrickSteele– PatrickSteele2017-08-10 16:59:06 +00:00Commented Aug 10, 2017 at 16:59
Add a comment
|
5 Answers
In the routes declaration, I like to add this:
[
...
{ path: '/404', component: NotFound },
{ path: '*', redirect: '/404' },
...
]
Which will imply that if the user is navigated to a path which does not match any routes, it will be redirected to the "404" route, which will contain the "not found" message.
The reason I've separated it into 2 routes is so that you can also programmatically direct the user to the 404 route in such a case when some data you need does not resolve.
For instance, if you were creating a blog, you might have this route:
{ path: '/posts/:slug', component: BlogPost }
Which will resolve, even if the provided slug does not actually retrieve any blog post. To handle this, when your application determines that a post was not found, do
return this.$router.push('/404')
or
return router.push('/404')
if you are not in the context of a Vue component.
One thing to bear in mind though is that the correct way to handle a not found response isn't just to serve an error page - you should try to serve an actual HTTP 404 response to the browser. You won't need to do this if the user is already inside a single-page-application, but if the browser hits that example blog post as its initial request, the server should really return a 404 code.
8 Comments
chaimp
If you don't want it to retain the path in the browser do:
{ path: '/404', alias: '*', component: NotFound,}
bumbleshoot
This is bad for analytics/SEO. Search engine bots, Google Search Console, Google Analytics, etc. will not receive an actual 404 status code when the page is not found.
HJo
@torjinx what would be a SEO friendly option?
bumbleshoot
@HamishJohnson unfortunately I have not been able to find one yet... I'd be thrilled if someone else could chime in on this issue.
PanPipes
With a SPA app the server has already replied with 200 status code and then Vue loads and takes the user to the page. So you can't send a 404, as the server has already done a 200. You are best looking into server side rendering like Nuxt.js, as you probably can handle 404 that way.
|
Now in Vue 3 path: '*' will not work. We have to use regex: /:catchAll(.*)
We can use directly instead of using path: "*"
{
// path: "*",
path: "/:catchAll(.*)",
name: "NotFound",
component: NotFound,
}
or
{
path: '/404', name: 'NotFound', component: NotFound
},
{
path: '/:catchAll(.*)', redirect:'404'
}
I got it from here
Comments
There are a couple of ways to do this.
The most generic one is to check if the path matches any route before navigation and if not redirect to the Not found page.
router.beforeEach((to, from, next) => {
if (!to.matched.length) {
next('/notFound');
} else {
next();
}
});
See JSFiddle.
1 Comment
charles-allen
Unlike
path: '*', this approach catches navigation to named routes that don't exist, for example :to="{ name: 'InvalidRoute' }" or $router.push({ name: 'InvalidRoute' }). However it does add a tiny overhead to every request.After @g-wilson answer I went { path: '*', component: NotFound }. Might be useful if you don't want to make redirect.
1 Comment
Petru Lebada
For what I do is I give a class of http-found to the parent div all my component and I the mounted hook of the App.vue I check using jQuery or Javascript if there is any element with the class of http-found if not I redirect to my 404 page.
App.vue
mounted(){
if(!$('.http-found')){
this.$router.push('/404')
}
}
1 Comment
James A Mohler
That is a strange mix of VueJS and jQuery. Most of the time you don't want to mix them.