如何使用 vue-router 重定向到带有无效 URL 参数的 404 页面

Question

我使用 vue-router 通过用户 ID 导航用户页面。 router.js 如下所示

export default new Router({ 
  mode: 'history', 
  base: process.env.BASE_URL, 
  routes: [ 
    { 
      path: '/user/:id',
      name: 'user',  
      component: () =>  
        import(/* webpackChunkName: "user" */ './views/User.vue'),
      props: true               
    },
    {
      path: '/404', 
      name: '404',
      component: () => import('./views/404.vue'),
    },
  ] 
})

如果有人转到 /user/some-invalid-id 的 URL，我如何将其重定向到 404 页面？

在我的应用中，所有用户数据都加载到 App.js' breforecreate()，现有用户的用户视图内部访问方式如下

<router-link :to="{name: 'user', params:{id: u.pk}}" >                  
  <a> {{u.first_name}} {{u.last_name}} </a>                             
</router-link>

我知道可以通过推送函数调用以编程方式重定向。但是我不知道这段代码应该用在什么地方

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

在 User.vue 视图页面中，我使用一个名为 userByID 的 vuex getter 来检索数据。

userByID: (state) => id => {
    return state.users.find(u => (u.pk == id))
}

router.push('/404') 应该发生在 userByID 或其调用者中吗？我们如何处理带有 undefined 用户对象的模板渲染？

Answer 1

我认为您想使用“Navigation Guards”，特别是在您的 /user/:id 路线中使用 beforeEnter 挂钩。

有点像这样（未测试；只是定向）：

routes: [ 
    { 
        path: '/user/:id',
        name: 'user',  
        component: () =>  
            import(/* webpackChunkName: "user" */ './views/User.vue'),
        props: true,               
        beforeEnter: (to, from, next) => {
            if (!userById($route.params.id)) {
                next('/404'); 
            }
            else {
                next();
            }
        }        
  }
    },
    {
        path: '/404', 
        name: '404',
        component: () => import('./views/404.vue'),
    },
  ]

请注意，您需要能够在不调用 User.vue 组件的情况下确定用户是否有效。

您还可以直接在 User.vue 上实现 beforeRouteEnter 挂钩，但您无法在那里调用其他 User.vue 方法，因为组件尚未安装.

关于导航守卫的更多信息：https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards

鉴于您的 userById 方法正在访问商店，我发现这个 post 可能会帮助您在 beforeEnter 方法中访问商店：How to access async store data in vue-router for usage in beforeEnter hook?

如何使用 vue-router 重定向到带有无效 URL 参数的 404 页面

How to use vue-router to redirect to 404 page with invalid URL parameter

vue.js

vue-router