详解基于vue-router的动态权限控制实现方案

if (menus) {
let items = JSON.parse(menus)
store.commit(ADD_MENU, items)
}

const router = new Router({
mode: 'hash',
linkActiveClass: 'is-active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
name: 'Main',
path: '/',
component: require('views/Main.vue'),
children: [ //动态路由之所以作为Main的子路由是基于：登录之后跳转到Main主页，该主页是类似于frame的页面加载框架，只有将动态路由作为Main的子路由才能确保其他页面显示到Main框架内。
...generateRoutesFromMenu(menuModule.state.items)
] },
{
name: 'Login',
path: '/login',
component: require('views/Login.vue')
}
]})

function generateRoutesFromMenu (menu = [], routes = []) {
for (let i = 0, l = menu.length; i < l; i++) {
let item = menu[i] if (item.path) {
routes.push(item)
}
if (!item.component) {
item.component = resolve => require([`views/` + item.component + `.vue`], resolve)
generateRoutesFromMenu(item.children, routes)
}
}
return routes
}

另附menu items代码

const state = {
 items: [ // 什么菜单都不定义，完全由后端返回
 ]}
const mutations = {
 [types.ADD_MENU] (state, menuItems) {
  if (menuItems.length > 0) {
   menuItems.map(function (item) {
    item.children.map(function (child) {
     child.component = lazyLoading(child.component)
    })
   })
   state.items.push(...menuItems)
  }
 },

lazyloding

export default (name, index = false) => () => import(`views/${name}${index ? '/index' : ''}.vue`)

git代码暂不能全部公开，有问题可留言。