如何正确使用vue路由器上的元道具？

Question

我正在尝试处理子路由的路由中间件，但是我得到了这个错误

Uncaught : 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

谁能解释一下吗？为什么我会得到这个错误，以及如何修复它？

提前谢谢。

Answer 1

我刚找到答案，有点傻..。我忘了在孩子们的道具上放方括号。现在就像我预料的那样起作用。

修正：

{
  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'),      
  }]
},