Vue 动态添加路由及生成菜单的方法示例

2023-08-21 07:46:05 176

写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。

为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。

在网上找了好多资料，终于想到了解决办法。

动态生成路由

利用vue-router的addRoutes方法可以动态添加路由。

先看一下官方介绍：

router.addRoutes

router.addRoutes(routes:Array)

动态添加更多的路由规则。参数必须是一个符合routes选项要求的数组。

举个例子：

constrouter=newRouter({
routes:[
{
path:'/login',
name:'login',
component:()=>import('../components/Login.vue')
},
{path:'/',redirect:'/home'},
]
})

上面的代码和下面的代码效果是一样的

constrouter=newRouter({
routes:[
{path:'/',redirect:'/home'},
]
})

router.addRoutes([
{
path:'/login',
name:'login',
component:()=>import('../components/Login.vue')
}
])

在动态添加路由的过程中，如果有404页面，一定要放在最后添加，否则在登陆的时候添加完页面会重定向到404页面。

类似于这样，这种规则一定要最后添加。

{path:'*',redirect:'/404'}

动态生成菜单

假设后台返回来的数据长这样

//左侧菜单栏数据
menuItems:[
{
name:'home',//要跳转的路由名称不是路径
size:18,//icon大小
type:'md-home',//icon类型
text:'主页'//文本内容
},
{
text:'二级菜单',
type:'ios-paper',
children:[
{
type:'ios-grid',
name:'t1',
text:'表格'
},
{
text:'三级菜单',
type:'ios-paper',
children:[
{
type:'ios-notifications-outline',
name:'msg',
text:'查看消息'
},
{
type:'md-lock',
name:'password',
text:'修改密码'
},
{
type:'md-person',
name:'userinfo',
text:'基本资料',
}
]
}
]
}
]

来看看怎么将它转化为菜单栏，我在这里使用了iview的组件，不用重复造轮子。








{{item.text}}





{{subItem.text}}



{{threeItem.text}}




{{subItem.text}}

代码不用看得太仔细，理解原理即可，其实就是通过三次v-for不停的对子数组进行循环，生成三级菜单。

动态菜单这样就可以实现了。

动态路由，因为上面已经说过了用addRoutes来实现，现在看看具体怎么做。

首先，要把项目所有的页面路由都列出来，再用后台返回来的数据动态匹配，能匹配上的就把路由加上，不能匹配上的就不加。

最后把这个新生成的路由数据用addRoutes添加到路由表里。

constasyncRoutes={
'home':{
path:'home',
name:'home',
component:()=>import('../views/Home.vue')
},
't1':{
path:'t1',
name:'t1',
component:()=>import('../views/T1.vue')
},
'password':{
path:'password',
name:'password',
component:()=>import('../views/Password.vue')
},
'msg':{
path:'msg',
name:'msg',
component:()=>import('../views/Msg.vue')
},
'userinfo':{
path:'userinfo',
name:'userinfo',
component:()=>import('../views/UserInfo.vue')
}
}

//传入后台数据生成路由表
menusToRoutes(menusData)

//将菜单信息转成对应的路由信息动态添加
functionmenusToRoutes(data){
constresult=[]
constchildren=[]

result.push({
path:'/',
component:()=>import('../components/Index.vue'),
children,
})

data.forEach(item=>{
generateRoutes(children,item)
})

children.push({
path:'error',
name:'error',
component:()=>import('../components/Error.vue')
})

//最后添加404页面否则会在登陆成功后跳到404页面
result.push(
{path:'*',redirect:'/error'},
)

returnresult
}

functiongenerateRoutes(children,item){
if(item.name){
children.push(asyncRoutes[item.name])
}elseif(item.children){
item.children.forEach(e=>{
generateRoutes(children,e)
})
}
}

所有的代码实现，我都放在github上，动态菜单的实现放在这个项目下的src/components/Index.vue、src/permission.js和src/utils/index.js下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue 动态添加路由及生成菜单的方法示例

热门推荐

随机推荐