如何使用vue-router在vuejs中创建404组件

Question

vuejs是新手，我正在使用vue工作我的第一个项目。我只是想知道当找不到请求的URL时，我将如何路由到我的404.vue组件。

任何想法？

Answer 1

有几个方法可以做到这一点。

最通用的一种是检查路径是否匹配任何路线，然后重定向到未找到页面。

router.beforeEach((to, from, next) => { 
    if (!to.matched.length) { 
    next('/notFound'); 
    } else { 
    next(); 
    } 
}); 

参见JSFiddle。

Answer 2

对于我所做的是我给一个http-found类的父div所有我的组件和我装载挂钩的App.vue我检查使用jQuery或Javascript，如果有任何元素类http-found如果不是我重定向到我的404页面。

App.vue

mounted(){ 
    if(!$('.http-found')){ 
    this.$router.push('/404') 
    } 
} 

Answer 3

在路由声明，我想补充一点：

[ 
    ... 
    { path: '/404', component: NotFound }, 
    { path: '*', redirect: '/404' }, 
    ... 
] 

这将意味着，如果用户导航到不匹配任何路线的路径，它会被重定向到“404”路由，它将包含“未找到”消息。

我把它分成两条路由的原因是，当你需要的某些数据不能解决时，你也可以通过编程的方式将用户导向404路由。

举例来说，如果你正在创建一个博客，你可能有这样的路线：

{ path: '/posts/:slug', component: BlogPost } 

这将解决，即使所提供的鼻涕虫实际上还不能获取任何博客文章。为了解决这个问题，当你的应用确定后没有被发现，做

return this.$router.push('/404') 

或

return router.push('/404') 

，如果你不是在Vue公司组件的上下文。

但有一点需要记住的是，处理找不到响应的正确方法不仅仅是提供错误页面 - 您应该尝试向浏览器提供实际的HTTP 404响应。如果用户已经在单页面应用程序中，那么您不需要这样做，但是如果浏览器将该示例博客文章作为其初始请求，则服务器应该返回404代码。