Vue 路由中的 beforeEnter 不适用于子路由答案

【问题标题】：beforeEnter in Vue routes does not work for children routesVue 路由中的 beforeEnter 不适用于子路由
【发布时间】：2019-11-21 09:17:50
【问题描述】：

我使用的是 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 放在父母中也适用于所有孩子。显然这不起作用，至少对我来说。

如何让它发挥作用？谢谢

【问题讨论】：

标签： vue.js authentication redirect vue-router

【解决方案1】：

您应该使用beforeEach 守卫而不是beforeEnter。

beforeEnter 是每个路由守卫，它不适用于孩子。

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

【讨论】：

感谢您的快速回复。我也想听听您对同一问题的看法。如果我只想保护shoes 及其孩子怎么办？在我的代码中用 beforeEach 替换 beforeEnter 是行不通的。如我所见，我必须为const router = new Router({ obj 之外的所有路由设置beforeEach。所以在我的情况下，我应该为每条路线保留beforeEnter 的代码吗？谢谢
您可以使用路由元。你可以检查这个router.vuejs.org/guide/advanced/meta.html和scotch.io/tutorials/…
再次感谢。最后一件事。为了清楚起见，在实践中，如果我将 beforeEnter 放在我想要的路线和子路线上没有问题吗？除非我在重复自己。
是的，我认为beforeEnter 没有特别的问题。

【解决方案2】：

是的，它不会那样工作，因为 'beforeEnter' 守卫是每条路线的守卫。如果你想使用 global ，那么你可以使用 beforeEach

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

希望，这可以帮助你:)

【讨论】：

感谢您的快速回复。如果我只想保护shoes 和它的孩子怎么办？在我的代码中用 beforeEach 替换 beforeEnter 是行不通的。如我所见，我必须为const router = new Router({ obj 之外的所有路由设置beforeEach。所以在我的情况下，我应该为每条路线保留beforeEnter 的代码吗？谢谢
我已准备好向您发送与@ittus 相同的链接，他已经回答了您:)，