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
}

// 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)
    }
}

// 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')