vue动态路由及生成菜单教程,vue动态设置路由
本文主要介绍了如何在vue后台管理中配置动态路由菜单，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
后台管理配置动态路由菜单根据权限生成动态路由导航菜单。
后台管理配置动态路由菜单
前段时间做了一个后台管理项目，因为超级管理员可以对普通管理员动态修改权限，所以vue-element-admin里面写死的权限路由菜单不适合我。我自己研究了很久，经历了各种没完没了的循环，最后差不多弄了一个，可能有点啰嗦。
总结一下：
我的后台分为三个角色：超级管理员、企业管理员、普通管理员。其中，超级管理员可以查看所有的路由菜单，企业管理员也是固定数量的菜单。所以超级管理员和企业管理员是我在前端写的路由菜单里直接配置的权限，而普通管理员是不固定的，所以需要后台给我返回数据，自己拼接。
1.首先，我们需要有一个登录页面。很简单，用户名和密码以及一个登录按钮就足够了。我用的是vue-element-admin的模板，已经写好了。直接用就好了。
2.在src-api文件夹下新建一个js文件来编写自己的登录、获取用户信息、注销等接口(也可以替换api/user.js文件中之前的模拟接口)。
3.点击登录按钮，该方法将调用store-modules-user.js中的登录方法，如下：
4.store-modules-user.js中的登录方法调用自己的登录接口。当然，打电话前记得介绍文件。
以上是我介绍的登录，获取用户信息，注销的界面。
5.调用登录接口后，存储返回的令牌等数据(根据你自己的需要，因为我后面需要用户id，所以我也在存储中保存了用户id)
6.此时调用同一页面的getInfo方法。当然，这个方法中也调用了获取用户信息的接口。这一步是获取登录用户的角色。在调用之后，返回的用户角色名称被保存在存储中(我还保存了其他数据，同样，保存任何需要的数据)
* * *在这里，我当时犯了一个bug:登录的时候刷新页面，跳转到登录的页面，显示部分关键数据没有保存。我上网搜索的时候，token在登录并调用登录接口后，已经用cookie存储在浏览器里了。那应该是我只在商店保存了id而没有在浏览器保存，导致我一刷新id就丢失了。于是我用localStorage/sessionStorage来存储我的id，然后在getInfo中获取本地存储的id，存储在store中。
7.由于一般管理员的路由菜单都是在后台返回给我的，在getInfo的方法中，我也是直接调用接口获取路由菜单，将返回的数据拼接生成完整的路由菜单，最后将路由菜单数组保存在存储中。
注意：404必须放在路由菜单的末尾。格式：{path: * ，redirect:/404 ，hidden: true}，记得放在最后！
8.接下来转到src/permission.js，调用store-modules-user.js中的getInfo方法，这一块和模板的代码没有区别，就不描述了。在这个方法中，调用store-modules-permission.js中的generateRoutes方法。
我们找找这个方法。这个方法实际上是根据传递的角色来判断它能看到的路由菜单。模板里原来的方法是把角色和写好的路由菜单一一对比，最后把权限对应的项放在一个数组里。我这里的超级管理员和普通管理员直接套用代码，因为权限和路由菜单是固定的。而普通管理员则调用存储在存储中的路由菜单数组，然后赋给定义好的变量。
之后就没什么好改的了，可以测试登录了。
这里我犯了一个比较大的bug：
当以普通管理员登录的时候，我进去之后菜单显示正常，可是当我不管点击哪个菜单，都给我跳到了404 。经过一番测试与排查，我找到了解决方法，是加一个延时器，加在生成路由方法的这个地方
之后就运行成功了，但是具体原因我其实不太明白，因为我console.log(访问路由)出来的也是正常的路由菜单
这就是大体的配置动态路由菜单的过程，作为第一次配置成功的心得。
根据权限生成动态路由及导航菜单
最近在做一个后台管理项目，涉及到一些菜单权限控制，具体实现如下：(话不多说，直接上代码)
路由器/索引. js
const Home=resolve=require([ @/views/common/Home。vue ]，resolve)；
const AAA=resolve=require([ @/views/page/AAA。vue ]，resolve)；
const BBB=resolve=require([ @/views/pages/BBB。vue ]，resolve)；
const CCC=resolve=require([ @/views/pages/CCC。vue ]，resolve)；
let routes=[{
路径："/",
成分：家，
名称： 首页，
重定向："/AAA "，
隐藏：真实，
大副：{
图标：“法法-家”，
指数：“AAA”
},
孩子：[{
路径："/AAA "，
成分：AAA，
名称： 主页
}]
}]
//从服务器获取路由，进行拼接，所有模块不再以进口的形式引入，只能通过需要方式加载！
出口常量生成路线=功能(项目){
让routes=[]；
for(var I=0；一。物品长度；i ) {
//控制台。日志(项目[I])；
items[I]=格式路由(items[I])；
如果（项目【我】。儿童){
//递归处理子路由的成分
项目[我].children=makeRoute(items[i].儿童);
}
}
退货项目；
}
//格式化路由，使成分挂载到路由上，生成添加路线可用的格式
const formatRoute=(item)={
设路线=项目
路线。component=eval(路线。组件)；
返回路线；
}
导出默认路由；
main.js(登录成功时，后台返回有权限的路由并存在状态管理器状态管理中)
从“vue”导入某视频剪辑软件
从导入应用程序 0.5/App
从“vue路由器"导入某视频剪辑软件路由器
从" axios "导入爱可信
从导入存储。/商店
从导入路线。/路由器/索引
从导入{ makeRoute } ./路由器
Vue.use(VueRouter)
const router=new VueRouter({
路线
})
router.beforeEach(收件人，发件人，下一个)={
//如果目标路由为登陆时，恢复用户原始状态
if (to.path===/login) {
window.clearInterval(窗口。间隔);
商店。提交(“注销”)；
}
让所有路线=存储。吸气剂。所有路线；
让登录状态=存储。吸气剂。登录状态；
//登录成功时加载路由及模块
如果(从。path===/log in 所有路由！== loginStatus) {
让routes obj=make route(store。吸气剂。所有路线)；
路由器。添加路线(routes obj)；
}
//没有登录时自动跳转，开发环境免登陆时注释
if ( to.path！==/login (allRoutes=== ！loginStatus)) {
如果(会话存储。getitem( userInfo )===null){
下一步({ path: /login })
}否则{
//刷新当前页面
//重置商店参数
设userInfo=JSON。解析(会话存储。getitem( userInfo )；
store.commit(setUser ，userInfo)；
if(userInfo.routes){
//重新加载路由及模块
let routes obj=make route(userinfo。路线)；
路由器。添加路线(routes obj)；
}
下一步({path: to.path，query:to。查询})；
}
}否则{
//路由的然后必须存在，否则无法进入下一页
next()；
}
})
备注：此方案最大的好处是不用再使用需要引入每一个组件并挂载到路由
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。