动态路由 [vue-router]"path" is required in a route configuration
动态路由
router -> index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'
import userlogin from '../views/userlogin.vue'
import Home from '../views/Home'
import Test1 from '../views/Test1'
import Test2 from '../views/Test2'
import { initMenu } from '../utils/api'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'userlogin',
component: userlogin,
hidden: true
},
{
path: '/home',
name: '导航一',
component: Home,
children: [
{
path: '/test1',
name: '选项1',
component: Test1
},
{
path: '/test2',
name: '选项2',
component: Test2
}
]
}
]
const router = new VueRouter({
routes
})
export default router
//全局前置守卫
router.beforeEach((to, from, next) => {
if (window.sessionStorage.getItem('tokenStr')) {
initMenu(router, store)
next()
} else {
next()
}
})
initMenu()
import { getRequest } from "./interceptors";
export const initMenu = (router, store) => {
if (store.state.routes.length > 0) {
return;
}
getRequest('/system/cfg/menu').then(data => {
if (data) {
//格式化Router
let fmtRoutes = formatRoutes(data)
//添加到router
router.addRoute(fmtRoutes);
//将数据存入vuex
store.commit('initRoutes', fmtRoutes);
}
})
}
export const formatRoutes = (routes) => {
let fmtRoutes = [];
routes.forEach(router => {
let {
path,
component,
name,
iconCls,
children,
} = router;
if (children && children instanceof Array) {
//递归
children = formatRoutes(children);
}
let fmRouter = {
path: path,
name: name,
iconCls: iconCls,
children: children,
component: () => {
if (component.startsWith('Home')) {
import('@/views/' + component);
} else if (component.startsWith('Emp')) {
import('@/views/emp/' + component);
} else if (component.startsWith('Per')) {
import('@/views/per/' + component);
} else if (component.startsWith('Sal')) {
import('@/views/sal/' + component);
} else if (component.startsWith('Sta')) {
import('@/views/sta/' + component);
} else if (component.startsWith('Sys')) {
import('@/views/sys/' + component);
}
}
}
fmtRoutes.push(fmRouter)
});
return fmtRoutes;
}
后端返回数据：
[
{
"id": 1,
"url": "/",
"path": null,
"component": null,
"name": "所有",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": true,
"children": [
{
"id": 2,
"url": "/",
"path": "/home",
"component": "Home",
"name": "员工资料",
"iconCls": "fa fa-user-circle-o",
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 3,
"url": "/",
"path": "/home",
"component": "Home",
"name": "人事管理",
"iconCls": "fa fa-address-card-o",
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 4,
"url": "/",
"path": "/home",
"component": "Home",
"name": "薪资管理",
"iconCls": "fa fa-money",
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 5,
"url": "/",
"path": "/home",
"component": "Home",
"name": "统计管理",
"iconCls": "fa fa-bar-chart",
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 6,
"url": "/",
"path": "/home",
"component": "Home",
"name": "系统管理",
"iconCls": "fa fa-windows",
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": null,
"roles": null
}
],
"roles": null
},
{
"id": 2,
"url": "/",
"path": "/home",
"component": "Home",
"name": "员工资料",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": [
{
"id": 7,
"url": "/employee/basic/**",
"path": "/emp/basic",
"component": "EmpBasic",
"name": "基本资料",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 2,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 8,
"url": "/employee/advanced/**",
"path": "/emp/adv",
"component": "EmpAdv",
"name": "高级资料",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 2,
"enabled": true,
"children": null,
"roles": null
}
],
"roles": null
},
{
"id": 3,
"url": "/",
"path": "/home",
"component": "Home",
"name": "人事管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": [
{
"id": 9,
"url": "/personnel/emp/**",
"path": "/per/emp",
"component": "PerEmp",
"name": "员工资料",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 3,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 10,
"url": "/personnel/ec/**",
"path": "/per/ec",
"component": "PerEc",
"name": "员工奖惩",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 3,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 11,
"url": "/personnel/train/**",
"path": "/per/train",
"component": "PerTrain",
"name": "员工培训",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 3,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 12,
"url": "/personnel/salary/**",
"path": "/per/salary",
"component": "PerSalary",
"name": "员工调薪",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 3,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 13,
"url": "/personnel/remove/**",
"path": "/per/mv",
"component": "PerMv",
"name": "员工调动",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 3,
"enabled": true,
"children": null,
"roles": null
}
],
"roles": null
},
{
"id": 4,
"url": "/",
"path": "/home",
"component": "Home",
"name": "薪资管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": [
{
"id": 14,
"url": "/salary/sob/**",
"path": "/sal/sob",
"component": "SalSob",
"name": "工资账套管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 4,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 15,
"url": "/salary/sobcfg/**",
"path": "/sal/sobcfg",
"component": "SalSobCfg",
"name": "员工账套设置",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 4,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 16,
"url": "/salary/table/**",
"path": "/sal/table",
"component": "SalTable",
"name": "工资表管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 4,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 17,
"url": "/salary/month/**",
"path": "/sal/month",
"component": "SalMonth",
"name": "月末处理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 4,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 18,
"url": "/salary/search/**",
"path": "/sal/search",
"component": "SalSearch",
"name": "工资表查询",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 4,
"enabled": true,
"children": null,
"roles": null
}
],
"roles": null
},
{
"id": 5,
"url": "/",
"path": "/home",
"component": "Home",
"name": "统计管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": [
{
"id": 19,
"url": "/statistics/all/**",
"path": "/sta/all",
"component": "StaAll",
"name": "综合信息统计",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 5,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 20,
"url": "/statistics/score/**",
"path": "/sta/score",
"component": "StaScore",
"name": "员工积分统计",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 5,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 21,
"url": "/statistics/personnel/**",
"path": "/sta/pers",
"component": "StaPers",
"name": "人事信息统计",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 5,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 22,
"url": "/statistics/recored/**",
"path": "/sta/record",
"component": "StaRecord",
"name": "人事记录统计",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 5,
"enabled": true,
"children": null,
"roles": null
}
],
"roles": null
},
{
"id": 6,
"url": "/",
"path": "/home",
"component": "Home",
"name": "系统管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 1,
"enabled": true,
"children": [
{
"id": 23,
"url": "/system/basic/**",
"path": "/sys/basic",
"component": "SysBasic",
"name": "基础信息设置",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 24,
"url": "/system/cfg/**",
"path": "/sys/cfg",
"component": "SysCfg",
"name": "系统管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 25,
"url": "/system/log/**",
"path": "/sys/log",
"component": "SysLog",
"name": "操作日志管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 26,
"url": "/system/admin/**",
"path": "/sys/admin",
"component": "SysAdmin",
"name": "操作员管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 27,
"url": "/system/data/**",
"path": "/sys/data",
"component": "SysData",
"name": "备份恢复数据库",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 28,
"url": "/system/init/**",
"path": "/sys/init",
"component": "SysInit",
"name": "初始化数据库",
"iconCls": null,
"keepAlive": null,
"requireAuth": true,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
}
],
"roles": null
}
]
问题
这是因为foreach第一次遍历时，path为null而引发的错误吗，请问该如何解决？
1、肯定跟path 为Null有关系
2、服务端的那个数据，有个地方path是null，你改一下试试
你这个数据 path 有为null的要不然就过滤掉要不然就 给 个默认值
这是云E办项目的一个前端问题。我的解决了，莫名就好了
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7620372