beforeEnter в маршрутах Vue не работает для дочерних маршрутов

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 children следующим образом:

        {
          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

Надеюсь, это может вам помочь:)