vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

2023-09-23 23:14:05 63

此案例主要实现了一个功能是，在vue实例首次运行时，在加载了login和404两个路由规则，登录成功后，根据登录用户角色权限获取该角色相应菜单权限，生成新的路由规则添加进去。

做过后台管理系统都一定做过这个功能，在对菜单权限进行粗粒度权限控制的时候，通过角色获取菜单后，异步生成菜单，所以一开始拿到需求的时候，我也以为这和平常的没什么不同，不过做起来就发现了很多问题，

1.vue-router的实例，在newvue实例的时候，就加载了，且必须加载，这个时候，登录路由一定要加载，可是这个时候没有登录，无法确定权限
2.路由规则与菜单的同步

解决思路演化，菜单和路由同步，肯定是采用了vuex，一开始的思路的是，在一开始，就把所有的路由规则加载，然后在登录的时候，取得权限路由，对比两个路由，通过修改修改一个权限字段来隐藏菜单，如果在后台页面添加了新菜单规则，路由是按模块加载的不同的文件，这时对路由的文件进行新的读写，虽然可以解决问题，但是如果手动在浏览器地址上路由，依然可以访问，所以在路由的全局钩子上还要做拦截。

这个解决方案虽然解决，但是显的比较复杂，于是就想需找新的方法，重新浏览官方api，发现在2.2.0以后，官方新增了api，addRoutes，专门针对服务端渲染路由，那么这下问题就比较简单了，下面列出实现代码。以下代码不能直接复用，需要根据实际情况修改，只是提供思路

app.js

letpermission=JSON.parse(window.sessionStorage.getItem('permission'))
if(permission){
store.commit(ADD_MENU,permission)
router.addRoutes(store.state.menu.items)
}
router.beforeEach((route,redirect,next)=>{
if(state.app.device.isMobile&&state.app.sidebar.opened){
store.commit(TOGGLE_SIDEBAR,false)
}
if(route.path==='/login'){
window.sessionStorage.removeItem('user')
window.sessionStorage.removeItem('permission')
store.commit(ADD_MENU,[])
}
letuser=JSON.parse(window.sessionStorage.getItem('user'))
if(!user&&route.path!=='/login'){
next({path:'/login'})
}else{
if(route.name){
next()
}else{
next({path:'/nofound'})
}
}
})

登录的组件login.vue






.login-container{
/*box-shadow:00px8px0rgba(0,0,0,0.06),01px0px0rgba(0,0,0,0.02);*/
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
background-clip:padding-box;
margin-bottom:20px;
background-color:#F9FAFC;
margin:180pxauto;
border:2pxsolid#8492A6;
width:350px;
padding:35px35px15px35px;

.title{
margin:0pxauto40pxauto;
text-align:center;
color:#505458;
}

.remember{
margin:0px0px35px0px;
}

}

关键点解释

computed:{
...mapGetters([
'menuitems',
'isLoadRoutes'
//...
])
},

这里是从vuex取得两个对象，menuitems是菜单对象，isLoadRoutes是用来判断是否是第一次登录，用来排除重复加载路由规则

...mapActions([
'addMenu',
'loadRoutes'
])

这里是从vuex取得两个方法，一个是添加菜单，一个更改loadRoutes的值

this.$router.addRoutes(this.menuitems)

这是关键api，动态的向router实例中添加路由规则

menu模块的state与mutations

conststate={
items:[
],
isLoadRoutes:false
}

constmutations={
[types.EXPAND_MENU](state,menuItem){
if(menuItem.index>-1){
if(state.items[menuItem.index]&&state.items[menuItem.index].meta){
state.items[menuItem.index].meta.expanded=menuItem.expanded
}
}elseif(menuItem.item&&'expanded'inmenuItem.item.meta){
menuItem.item.meta.expanded=menuItem.expanded
}
},
[types.ADD_MENU](state,menuItems){
if(menuItems.length===0){
state.items=[]
}else{
generateMenuItems(state.items,menuItems)
}
},
[types.LOAD_ROUTES](state){
state.isLoadRoutes=!state.isLoadRoutes
}
}

路由配置文件router.js

importVuefrom'vue'
importRouterfrom'vue-router'
importmenuModulefrom'vuex-store/modules/menu'
Vue.use(Router)

exportdefaultnewRouter({
mode:'hash',//DemoislivinginGitHub.io,sorequired!
linkActiveClass:'is-active',
scrollBehavior:()=>({y:0}),
routes:[
{
path:'/login',
component:require('../Login.vue'),
meta:{
expanded:false,
show:false
},
name:'Login'
},
{
path:'/',
component:require('../views/Home.vue'),
meta:{
expanded:false,
show:false
},
children:[
{path:'/nofound',component:require('../404.vue'),name:'NOFOUND',meta:{show:false}}
]
},
...generateRoutesFromMenu(menuModule.state.items)
]
})

//Menushouldhave2levels.
functiongenerateRoutesFromMenu(menu=[],routes=[]){
for(leti=0,l=menu.length;i
vuex


importVuefrom'vue'
importVuexfrom'vuex'
import*asactionsfrom'./actions'
import*asgettersfrom'./getters'

importmenufrom'./modules/menu'

Vue.use(Vuex)

conststore=newVuex.Store({
strict:true,//process.env.NODE_ENV!=='development',
actions,
getters,
modules:{
menu
},
mutations:{
}
})

exportdefaultstore
actions


exportconstaddMenu=({commit},menuItems)=>{
if(menuItems.length>0){
commit(types.ADD_MENU,menuItems)
}
}

exportconstloadRoutes=({commit})=>{
commit(types.LOAD_ROUTES)
}
getters


constmenuitems=state=>state.menu.items
constisLoadRoutes=state=>state.menu.isLoadRoutes
export{
menuitems,
isLoadRoutes
}
mutations_type.js


exportconstADD_MENU='ADD_MENU'

exportconstLOAD_ROUTES='LOAD_ROUTES'
因为上面的代码不能直接运行，再次梳理一下思路，
1.创建vue实例的时候，将vuex和vue-router加载，这个时候，vue-router只有登录规则和404规则
2.vuex中state管理的状态对象有，菜单对象menuitems，是否加载过路由loadRoutes，并提供相应的getters与actions当然还有一些其他的，这里没有列举
3.然后在登录组件中，登录成功后，将服务端传回来之后，调用actions更改state.menuitems,并且中间有格式化的过程，这个过程的代码没有贴出来，主要是由于不同的表涉和服务端返回的数据不一样，，
4.然后调用addRoutes和actions更改已经加载过路由的方法
5.然后为了防止用户直接手动按f5刷新页面，这个时候会重新构建vue实例，而又没有重新登录，所以vuex里面的东西会清空，所以将登录后的数据存放在sessionStroage中，在刷新页面，重新构建vue实例的时候，会有判断
6.之后会渲染侧边栏组件，列出菜单，数据就可以根据state.menuitems来就可以了，我这里没有贴我的，实际根据自己的需求来
后面有时间会在github上上传完整代码。


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

vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

热门推荐

随机推荐