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