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

Question

问题

使用 Vue.js，如何在不更改 url 的情况下在动态路由中返回 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 打开组件“NotFound”，网址保持在site.com/work/non-existent-id

例子

https://vuejs.org/v2/guide/something - 返回 404 错误并停留在 url 中

Answer 1

路由器旨在完全按照您希望它们不做的事情来做。如果您想在应用程序的任何路由上显示一些内容，我建议您创建一个新组件并触发一个事件以显示您想要的任何内容。

就个人而言，我认为重新路由将是可行的方法，因为这将允许用户点击浏览器中的后退按钮以返回他们来自的位置，但我想这一切都取决于您的具体用途案例在这里。

Answer 2

我仍在使用 vue router3 并且在不更改 url 的情况下为我工作。 对于 axios。

beforeRouteEnter(to,from,next) {
 axios
 .get(`http://localhost:5000/api/product/${to.params.id}`)
 .then((res) => {
    next((vm) => {
      vm.product = res.data;
      next();
    });
  })
  .catch((error) => {
     
      next({ name: 'notFound', params: [to.path]});
    
    
  });
}