Как правильно использовать мета-реквизит на Vue-роутере? - PullRequest
Новая
       8

Как правильно использовать мета-реквизит на Vue-роутере?

2 голосов
/ 06 октября 2019

Я пытаюсь обработать промежуточное программное обеспечение маршрута дочернего маршрута, но я получил эту ошибку

Uncaught TypeError: route.children.some не является функцией

В документации приведен только пример для одного маршрута, но в этом случае у меня есть дочерний маршрут, который необходимо ограничить.

Пожалуйста, посмотрите на конфигурацию моего маршрутизатора: 

import Vue from 'vue'
import Router from 'vue-router'
import store from './store/index'

import Home from './views/home/Index.vue'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  base: process.env.VUE_APP_BASE_URL,
  linkActiveClass: 'is-active',
  linkExactActiveClass: 'is-exact-active',
  routes: [{
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      // route level code-splitting
      // this generates a separate chunk (login.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('./views/auth/Login.vue'),
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('./views/auth/Register.vue'),
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/forgot-password',
      name: 'forgot-password',
      component: () => import('./views/auth/extras/ForgotPassword.vue'),
      meta: {
        requiresGuest: true
      }
    },
    {
      path: '/database',
      name: 'database',
      component: () => import('./views/database/Index.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/third-parties',
      name: 'third-parties',
      component: () => import('./views/third-parties/Index.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/editor',
      name: 'editor',
      meta: {
        requiresAuth: true,
        requiresAdmin: true,
        requiresEditor: true,
      },
      children: {
        path: ':appSlug/layout-editor/:pageSlug',
        name: 'layout-editor',
        component: () => import('./views/editor/Index.vue'),      
      }
    },
  ]
})


router.beforeEach((to, from, next) => {
  const isLoggedIn = store.getters['auth/isLoggedIn'];

  // Role getters
  const isAdmin = (store.getters['auth/isAdmin'] == 'admin') || (store.getters['auth/isAdmin'] == 'super-admin');
  const isEditor = store.getters['auth/isEditor'] == 'editor';

  // Redirect to the login page if the user is not logged in
  // and the route meta record is requires auth
  if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {
    next('/login')
  }

  // Redirect to the homepage page if the user is logged in
  // and the route meta record is requires guest
  if (to.matched.some(record => record.meta.requiresGuest) && isLoggedIn) {
    next('/')
  }

  // Redirect to the preview page if the user is logged in
  // but has no role assigned or the role is user
  if (to.matched.some(record => (
      record.meta.requiresAuth &&
      record.meta.requiresAdmin &&
      record.meta.requiresEditor)) && !isAdmin && !isEditor) {

    next('/preview')

  }

  // Pass any access if not match two conditions above
  next()
})

export default router

Может кто-нибудь объяснить это? Почему я получаю эту ошибку и как ее исправить?

Заранее спасибо.

1 Ответ

2 голосов
/ 06 октября 2019

Я только что нашел ответ, довольно глупо, хотя .. Я забыл поставить квадратные скобки на реквизит детей. Теперь он работает, как я ожидал.

исправлено: 

{
  path: '/editor',
  name: 'editor',
  meta: {
    requiresAuth: true,
    requiresAdmin: true,
    requiresEditor: true,
  },
  children: [{
    path: ':appSlug/layout-editor/:pageSlug',
    name: 'layout-editor',
    component: () => import('./views/editor/Index.vue'),      
  }]
},
...