位置: IT常识 - 正文

vue实现动态路由添加（简单无废话版本）(vue动态路由是什么)

发布时间：2024-01-17

vue实现动态路由添加（简单无废话版本）

推荐整理分享vue实现动态路由添加（简单无废话版本）(vue动态路由是什么)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue动态路由与静态路由的区别,vue实现动态路由菜单,vue动态路由传参,vue动态路由三种方法,vue实现动态路由跳转,vue实现动态路由的方法,vue实现动态路由跳转,vue实现动态路由菜单,内容如对您有帮助，希望把文章链接给更多的朋友！

最近练习vue的项目，有关于后台管理系统的动态添加路由部分,根据思路实现了基本的功能，在这里记录一下，等后面学习后在进行优化。

这里只是记录我个人最后实现的思路，本人由于是初学者，可能思路和代码有不正确地方，还求多见谅。也请能不吝赐教，一同进步。

一 . 封装一个处理生产路由的函数 vue实现动态路由添加（简单无废话版本）(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，因为是同步的，所以不会出现这个情况。这个问题后面如果找到解决办法，会重新进行修改。