最近练习vue的项目    
    
    
    ，有关于后台管理系统的动态添加路由部分,根据思路实现了基本的功能 


     


     


     


，在这里记录一下

 




 




 




，等后面学习后在进行优化
    
    
    
。

这里只是记录我个人最后实现的思路   

   

   

   ，本人由于是初学者  

     

     

     

，可能思路和代码有不正确地方


  




  




  




，还求多见谅     


     


     


    。也请能不吝赐教  


  


  


  ，一同进步 




 




 




 


。

一 . 封装一个处理生产路由的函数

我们可以封装一个函数   
     
     
     
，这个函数专门用来帮助我们生产最后添加到路由中的路由对象

   

   

   

。

//map-menu.js //动态添加路由 const modules = import.meta.glob(../views/*/*.vue) //vite中获取组件文件的方法 export function mapMenu(navList) { //navList 传入后台接口返回的路由列表 //最终动态添加路由返回数组 const routerList = [] for (const key of navList) { routerList.push({ path: `/${key.nUrl.split(/)[2]}`, name: `${key.nUrl.split(/)[2].toUpperCase()}`, component: modules[`..${key.nUrl}`] }) } return routerList }

注意：这里需要大家自己根据自己需要的情况进行处理



   




   




   




，因为后端接口传递过来的数据不同 



 



 



 ，所以你需要根据情况将path,name,component这三个获取出来并最终转换成你需要的     

     

     

   。

二. vuex中进行调用

我们封装好了一个函数                   ，接下来我们就需要调用来帮助我们动态生产路由




    




    




    




，但是有一个问题来了














，我们需要何时来进行动态生成路由  




  




  




  

。

这里我个人理解是：1.在用户进行登录后进行动态生产路由                    ，将用户的菜单生成出来



     



     



     



，并保存起来


  


  


  


。 2. 就是在页面刷新时候我们也需要动态生成路由















，因为刷新页面路由会刷新    
    
    
    ，不再次进行动态生成就是丢失 


     


     


     


，这里我们可以和对vuex初始化一起进行     
     
     
  。 // vuex中的user.js模块 //动态添加路由 import { mapMenu } from @/util/map-menu.js //前面封装的函数 state: { userNav: [] }, mutations: { changeUserNav(state, userNav) { state.userNav = userNav //动态添加路由 mapMenu(userNav).forEach((route) => { router.addRoute(route) //动态添加路由 }) } }, actions: { async requestUserNav({ commit }) { const navList = await getRolesNavRequest() commit(changeUserNav, navList) cache.setCache(jxcms-userNav, navList) } }

这样我们就定义好了

 




 




 




，只需要调用store.dispatch(requestUserNav) 就可以动态生成路由   




   




   




   
。另外   

   

   

   ，因为vue-router4.0中将 router.addRoutes方法废除了  

     

     

     

，所以我们只能使用 router.addRoute 循环添加所有的路由



 



 



 



。

三


  




  




  




，最终完成动态添加路由

前面我们说过了  


  


  


  ，我们动态添加路由的时机就是二个   
     
     
     
，初始化和登录时候



   




   




   




，所以我们现在就完成最后的部分                。

// vuex中的user.js模块 //动态添加路由 import { mapMenu } from @/util/map-menu.js //前面封装的函数 state: { ... }, mutations: { ... }, actions: { async loginUser({ dispatch, commit }, info) { const loginRes = await loginUser(info) if (loginRes.uName) { if (!cache.getCache(jxcms-token)) { ElMessage({ message: 登录成功!, type: success }) } commit(changeUser, loginRes) //本地存储 cache.setCache(jxcms-user, loginRes) dispatch(requestUserNav) //执行动态生成路由 router.push(/roles) cache.setCache(jxcms-token, loginRes.token) } else { ElMessage({ message: 登录失败, type: error }) } } }

这里我们完成第一个动态添加路由的时机 



 



 



 ，登录成功时候                   ，进行动态路由添加    




    




    




    。

// vuex中的根模块 index.js actions: { initializationData({ dispatch, commit }) { //vuex初始化函数 const navList = cache.getCache(jxcms-userNav) commit(changeUserNav, navList) //动态生成路由 //要用同步的 const user = cache.getCache(jxcms-user) commit(changeUser, user) } }, modules: { user, nav, dept, roles } // main.js //初始化 store.dispatch(initializationData)

这里我们完成了动态生成路由的第二个时机：刷新页面时




    




    




    




，初始化时候进行动态路由生成. 因为刷新页面时候用户可能是登录状态














，这样我们就不能通过登录成功来触发动态路由添加                    ，就需要我们主动进行动态路由生成



     



     



     



，在初始化时候















，获取到本地存储的菜单信息    
    
    
    ，如果用户没有登录 


     


     


     


，本地的菜单信息会被清除



















。

另外

 




 




 




，这里我使用的是commit来提交mutations,而不是actions函数   

   

   

   ，这是因为我在测试过程中发现  

     

     

     

，如果我使用actions


  




  




  




，那么我在进入路由页面前  


  


  


  ，路由并没有创建成功   
     
     
     
，会报错



   




   




   




，而使用mutations 



 



 



 ，因为是同步的                   ，所以不会出现这个情况               。这个问题后面如果找到解决办法




    




    




    




，会重新进行修改     



     



     



     。