Question

问题

使用Vue.js，如何在不更改网址的情况下在动态路由中返回404错误？

我的route.js的一部分（一切正常）

{

    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”组件打开，但网址来自 site.com/work/non-existent- id 到 site.com

我所期待的

site.com/work/non-existent-id 打开组件“未找到”，并且该网址停留在 site.com/work/non-existent-id < / p>

示例

https://vuejs.org/v2/guide/something-返回404错误并保留在网址中

Answer 1

路由器旨在完全按照您的要求做。如果您想在应用程序的任何路径上显示一些内容，建议您创建一个新组件，并可能触发一个事件以显示所需的任何内容。

就个人而言，我认为应该采用重新路由，因为这将允许用户点击浏览器中的后退按钮以返回到其来源，但我想这一切都取决于您的特定用途情况在这里。

如何在不更改Vue中的URL的情况下返回404错误？

1 个答案: