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

【问题标题】：How to use vue-router to redirect to 404 page with invalid URL parameter如何使用 vue-router 重定向到 URL 参数无效的 404 页面
【发布时间】：2019-04-21 04:57:54
【问题描述】：

我使用 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的网址，我该如何重定向到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用户对象的模板渲染？

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

我认为您想在您的 /user/:id 路由中使用“Navigation Guards”，特别是 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 方法正在访问商店，我发现这篇文章可能会帮助您在 beforeEnter 方法中访问商店：How to access async store data in vue-router for usage in beforeEnter hook?

【讨论】：