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

Question

我是vuejs的新手,我正在用vue开展我的第一个项目.我只是想知道如果找不到请求的URL,我将如何路由到我的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代码.

这对分析/ SEO不利.当找不到页面时,搜索引擎机器人,Google搜索控制台,Google Analytics等不会收到实际的404状态代码. (7认同)
如果你不希望它在浏览器中保留路径，请执行：`{ path: '/404', alias: '*', component: NotFound,}` (3认同)
@torjinx什么是SEO友好选项？ (3认同)
使用SPA应用程序，服务器已经回复了200个状态代码，然后Vue加载并将用户带到该页面。因此，您无法发送404，因为服务器已经完成了200。您最好查看像Nuxt.js这样的服务器端呈现，因为您可能可以这样处理404。 (2认同)

Answer 2

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

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

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

Answer 3

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

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

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

或者

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

我从这里得到的

Answer 4

@ g-wilson回答后，我去了{ path: '*', component: NotFound }。如果您不想进行重定向，则可能会很有用。