vue.js - 如何正确使用 vue 路由器上的元道具?
问题描述
我正在尝试处理子路由的路由中间件,但出现此错误
未捕获的 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
有人可以解释一下吗?为什么我收到此错误以及如何解决?
提前致谢。
解决方案
我刚刚找到了答案,有点傻……我忘了在儿童道具上放方括号。现在它按我的预期工作。
使固定:
{
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'),
}]
},
推荐阅读
- c# - 赶上一个新添加的项目
- moodle - 在系统级别将用户分配给学生角色
- azure - 天蓝色云中的 Automation Anywhere 社区版
- quire-api - 检索 Quire API 的访问令牌 - unsupported_grant_type
- angular - Angular 应用程序在电子中打开,但不在浏览器中
- lettuce - 生菜中 thenAcceptAsync 的用例是什么
- c# - 如何使用 Ajax 以数组格式将多个图像从 MVC 视图发送到控制器?
- sql - 我想将包含范围的数字列表转换为仅数字列表
- sql - 选择具有聚合的多个列
- django - Django Rest Framework,TypeError:__init__() 接受 1 个位置参数,但给出了 2 个