Question

我正在使用vue 2.6.10，并在vue的router.js中设置了类似的路由

Vue.use(Router)

const router =  new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
    },    

    {
      path: '/shoes',
      name: 'shoes',
      component: Shoes,
      beforeEnter: (to, from, next) => { 
        if (store.state.login.quad_token == null) {
          next('/login');
        }
        next();
      },
      children:[
            {
              path: ':skateshoes',
              name: 'skateshoes',
              component: SkateShoes
            }, 
      //more children routes

问题是，如果我从浏览器中手动删除cookie并转到/shoes/skateshoes，则不会重定向到登录页面。

要重定向，我必须像这样编辑skateshoes子级路由

        {
          path: ':skateshoes',
          name: 'skateshoes',
          component: SkateShoes,
          beforeEnter: (to, from, next) => { 
            if (store.state.login.quad_token == null) {
              next('/login');
            }
            next();
          }
        },

我认为将beforeEnter放在父母中也将对所有孩子有用。显然这是行不通的，至少对我而言。

我如何使其工作？谢谢

Answer 1

是的，那样是行不通的，因为'beforeEnter'防护是每个路由的防护。如果要使用全局的东西，那么可以使用beforeEach

在这里您可以阅读，如何在您的情况下实现它：https://router.vuejs.org/guide/advanced/navigation-guards.html

希望，这可以帮助您：）

Answer 2

您应该使用beforeEach保护而不是beforeEnter。

beforeEnter是一个按路线守卫，不适用于儿童。

您可以将router's meta与beforeEach结合使用来添加条件逻辑。

Vue路线中的beforeEnter不适用于子路线

2 个答案: