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

知道吗?

推荐答案

在路由声明中,我想补充以下内容:

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

这意味着,如果用户被导航到与任何路由都不匹配的路径,它将被重定向到"404"路由,该路由将包含"not found"消息.

我将其分为两条路由的原因是,在您需要的某些数据无法解析的情况下,您还可以通过编程将用户 bootstrap 到404路由.

例如,如果你正在创建一个博客,你可能有以下途径:

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

这将解决问题,即使提供的slug实际上没有检索任何博客文章.要处理此问题,当应用程序确定找不到帖子时,请执行以下操作:

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

return router.push('/404')

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

One thing to bear in mind though is that the c或rect way to handle a not found response isn't just to serve an err或 page - you should try to serve an actual HTTP 404 response to the browser. You won't need to do this if the user is already inside a single-page-application, but if the browser hits that example blog post as its initial request, the server should really return a 404 code.

Vue.js相关问答推荐

使用 cypress 进行 e2e 测试的 vuejs 期间出现 Webpack 错误

Vue CLI - 编译后将配置文件保留为外部

Vue Table 2 - 自定义过滤器

Vue 单元测试:您正在开发模式下运行 Vue?

Vue-router:循环路由以动态创建

在组件的样式部分使用 Vue 变量

全局方法和实例方法有什么区别?

在 SPA VueJS 中全局声明 mapState 和 mapMutations

如果我观看解构的props,Vue 3 手表将无法正常工作

NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js

如何在 Node.js 服务器上部署 Vue.js 应用程序

在 Vuejs 中计算 DOM 元素之间距离的最佳方法是什么?

Vue 如何使用 slot 和 slot-props 测试组件

触发子函数

如何在 vuetify 中将工具提示添加到数据表标题?

在Vue中单击路由链接上的激活方法

如何将 Angular 和 Vue 项目合并在一起?

从 vue.js 中的 store 获得的计算(computed)属性的设置器

'不提供名为'createRouter'的导出'' vue 3、vite 和 vue-router

v-if 未在计算(computed)属性上触发