最近接手一个后台管理系统,需要实现导航菜单从后台拉取的效果,根据登录用户的权限不同分别拉出来的导航菜单也不一样,另外可操作的界面也存在区别。
因为后台管理系统是准备使用vue + vue-router + element-ui + vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了。接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现。
经过一番折腾终于实现了功能,记录下来便于回顾,也希望能帮助到同样有需求的同志。
1,首先在本地配置好固定不变的路由地址,例如登录,404这些页面,如下:
配置好这些固定的路由后我们才能够到登录页面,不然是无法继续下去的。
2,然后重要的一步,我们需要跟后端老铁约定好需要返回的权限菜单列表信息,首先这里我们先分析一下自己需要的路由结构,这里以我自己的路由作为例子。如果是我自己直接定义路由的话,会是以下结构:
根据以上结构分析,其实真正需要动态配置的路由其实是/布局下面儿童的部分,所以需要后端返回给我们包含所有路由的一个数组就可以了
//登录
登录(){
让params={
账户:this.loginForm.username,
密码:加密(this.loginForm.password)
}
这一点。加载=true
http.post美元(这。美元bumng +/登录,这个。惠普美元(params))
不要犹豫((res)=比;{
这一点。日志=false
console.info(“菜单列表:“res)
如果(res.resultCode===这。state_ok美元){//合并一级菜单和二级菜单,便于显示
让菜单=handleMenu.mergeSubInRoot (res。rootList res.subList)//本地化处理好的菜单列表
这一点。储蓄者({标签:“menuList”,价值:菜单})//根据子列表处理路由
让路线=handleMenu.mergeRoutes (res.subList)//本地化分表,便于在刷新页面的时候重新配置路由
这一点。储蓄者({标签:“子列表”,价值:res.subList})//防止重复配置相同路由
如果(router.options.routes美元。长度& lt;=1) {
美元。router.addRoutes(路线)//这个。路由器不美元是响应式的,所以手动将路由元注入路由对象
美元。router.options.routes.push(路线)
}
router.replace美元。(“/布局/指数”)
}
}）
.catch ((err)=比;{
这一点。日志=false
控制台。错误(“错误:“犯错)
}）
},
