如何使用 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 代码。

Answer 2

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

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

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

或

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

我从这里得到它

Answer 3

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

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

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

请参阅 JSFiddle。

Answer 4

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

Answer 5

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

App.vue

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