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

第

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

目录前言一.封装一个处理生产路由的函数二.vuex中进行调用三，最终完成动态添加路由总结

前言

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

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

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

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

//map-menu.js

//动态添加路由

constmodules=import.meta.glob(../views/*/*.vue)//vite中获取组件文件的方法

exportfunctionmapMenu(navList){//navList传入后台接口返回的路由列表

//最终动态添加路由返回数组

constrouterList=[]

for(constkeyofnavList){

routerList.push({

path:`/${key.nUrl.split(/)[2]}`,

name:`${key.nUrl.split(/)[2].toUpperCase()}`,

component:modules[`..${key.nUrl}`]

returnrouterList

}

注意：这里需要大家自己根据自己需要的情况进行处理，因为后端接口传递过来的数据不同，所以你需要根据情况将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:{

asyncrequestUserNav({commit}){

constnavList=awaitgetRolesNavRequest()

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:{

asyncloginUser({dispatch,commit},info){

constloginRes=awaitloginUser(info)

if(loginRes.uName){

if(!cache.getCache(jxcms-token)){

ElMessage({

message:登录成功!,

type:success

commit(changeUser,loginRes)

//本地存储