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>

我知道可以通过push函数调用以编程方式重定向。但是我不知道应该在哪里使用此代码。

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

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

类似这样的东西（未经测试；只是定向的）：

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?

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

1 个答案: