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

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

任何的想法？

解决方法

在路线声明中,我想添加这个：

[
  ...  
  { 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代码.