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

Question

我是vuejs的新手，我正在使用vue开展我的第一个项目。我只是想知道如果找不到请求的网址，我将如何路由到我的404.vue组件。

任何想法？

Answer 1

在路线声明中，我想补充一下：

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

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

我将它分成2条路由的原因是，在这种情况下，当您需要的某些数据无法解析时，您也可以通过编程方式将用户定向到404路由。

例如，如果您正在创建博客，则可能有以下路线：

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

即使提供的slug实际上没有检索任何博客帖子，也会解决。要处理此问题，当您的应用程序确定找不到帖子时，请执行

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

或

return router.push('/404')

如果您不在Vue组件的上下文中。

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

Answer 2

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

最通用的方法是在导航前检查路径是否与任何路线匹配，如果没有重定向到未找到页面。

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

请参阅JSFiddle。

Answer 3

在@ g-wilson回答之后，我去了while running:。如果您不想进行重定向，则可能会有用。

Answer 4

现在在Vue 3 path: '*'中将不起作用。我们必须使用正则表达式：/:catchAll(.*)

我们可以直接使用，而不是使用path: "*"

{
    // path: "*",
    path: "/:catchAll(.*)",
    name: "NotFound",
    component:NotFound,
}

或

{
    path: '/404', name: 'NotFound', component: NotFound
},
{
    path: '/:catchAll(.*)', redirect:'404'
}

我从here那里得到了

Answer 5

我所做的是将http-found类提供给父div我的所有组件和App.vue的挂钩我使用jQuery或Javascript检查是否有任何类的元素http-found如果没有，我会重定向到我的404页面。

App.vue

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