题
使用Vue.js,如何在没有更改URL的情况下在动态路由中返回404错误?
我的router.is的一部分(一切都好)
{
path: '/work/:id',
name: 'work',
component: () => import( './views/Work.vue' )
},
{
path: '*',
name: 'NotFound',
component: () => import( './views/NotFound.vue' )
}
Work.vue组件的一部分。我检查路由参数是否在我的静态json中,如果没有,在路由输入之前打开NotFound组件
beforeRouteEnter (to, from, next) {
next(vm => {
vm.item = json.find(item => item.id == vm.$route.params.id)
if(!vm.item) {
next({name: NotFound})
}
})
}
问题
当我尝试使用site.com/work/non-existent-id时,组件“NotFound”打开,但是url从site.com/work/non-existent-id转到site.com
我所期待的
site.com/work/non-existent-id打开组件“NotFound”,网址保留在site.com/work/non-existent-id
例
https://vuejs.org/v2/guide/something - 返回404错误并留在网址中
路由器的设计完全符合您的要求。如果您想在应用程序中的任何路径上显示某些内容,我建议您创建一个新组件,然后启动一个事件来显示您想要的任何内容。
就个人而言,我认为重新路由将是要走的路,因为这将允许用户点击浏览器中的后退按钮返回到他们来自的地方,但我想这一切都取决于您的具体用例。