亲宝软件园·资讯

展开

vue实现动态路由添加功能的简单方法(无废话版本)

夏灿y 人气:0

前言

最近练习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,因为是同步的,所以不会出现这个情况。这个问题后面如果找到解决办法,会重新进行修改。

总结 

加载全部内容

相关教程
猜你喜欢
用户评论