使用vue开发带权限管理系统,尤其是采用了vue-router做路由,很多人都遇到的一个问题就是如何动态加载路由path对应的component。
典型的应用场景就是:前端菜单不静态的写在vue程序里,而是要从后台程序和数据库返回的菜单来动态加载到vue应用中。
网上很多问权限的问题,但几乎找不到很好的解决答案,在很长一段时间里,非常打击使用vue技术栈开发的信心。最有质量的一篇文章是:
但作者并没有完全解决这个问题,还留有几个问题是:
1)登录之后跳转到首页,此时路由已经是加载完成的了不能更改,菜单可以显示但是没有路由。
2)前端应用人为刷新网页路由产生某些问题。
问题1的解决思路:
登录之后跳转到首页,router是vue应用的router 引入进登录方法,在登录之后跳转之前对router进行改变,改变要点1是精确赋值到router的routes具体地方,比如我这里是routes[0]的子路由,2是用addRoutes函数使其生效。
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
}
问题2的解决思路:
是不在主app里引入实例化vue-router的js,而是直接在app里实例化router,目的就是网页刷新的时候每次都确保生成动态的router。
app.js部分代码:
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)
}
}
return routes
}
另附menu items代码
lazyloding
git代码暂不能全部公开,有问题可留言。