2024.3 vue2实现动态生成路由

要求：

  • 后端返回菜单结构，根据菜单结构动态生成除了详情页之外的菜单

实现思路：

  • 在store存储菜单的地方添加动态路由

菜单结构

{
    "code": 200,
    "msg": "成功!",
    "data": [
        {
            "id": 12,
            "menuName": "分销管理",
            "path": "views/Distribution/index",
            "sort": 0,
            "label": "分销管理",
            "hidden": 0,
            "menuKey": "distribution",
            "parentIds": "11,12",
            "icon": null,
            "children": null,
            "pid": 11
        },
        {
            "id": 23,
            "menuName": "积分记录",
            "path": "views/SystemSetting/Integral/index",
            "sort": 0,
            "label": "积分记录",
            "hidden": 0,
            "menuKey": "integral",
            "parentIds": "15,23",
            "icon": null,
            "children": null,
            "pid": 15
        },
        {
            "id": 22,
            "menuName": "充值查询",
            "path": "views/SystemSetting/RechargeQuery/index",
            "sort": 0,
            "label": "充值查询",
            "hidden": 0,
            "menuKey": "rechargeQuery",
            "parentIds": "15,22",
            "icon": null,
            "children": null,
            "pid": 15
        },
        {
            "id": 21,
            "menuName": "充值审核",
            "path": "views/SystemSetting/RechargeCheck/index",
            "sort": 0,
            "label": "充值审核",
            "hidden": 0,
            "menuKey": "rechargeCheck",
            "parentIds": "15,21",
            "icon": null,
            "children": null,
            "pid": 15
        },
        {
            "id": 20,
            "menuName": "充值服务",
            "path": "views/SystemSetting/Recharge/index",
            "sort": 0,
            "label": "充值服务",
            "hidden": 0,
            "menuKey": "recharge",
            "parentIds": "15,20",
            "icon": null,
            "children": null,
            "pid": 15
        },
        {
            "id": 19,
            "menuName": "小程序&系统设置",
            "path": "views/SystemSetting/SystemSet/index",
            "sort": 0,
            "label": "小程序&系统设置",
            "hidden": 0,
            "menuKey": "systemSet",
            "parentIds": "15,19",
            "icon": null,
            "children": null,
            "pid": 15
        },
        {
            "id": 11,
            "menuName": "财务管理",
            "path": "views/Finance/index",
            "sort": 0,
            "label": "财务管理",
            "hidden": 0,
            "menuKey": "finance",
            "parentIds": "11",
            "icon": "el-icon-s-finance",
            "children": null,
            "pid": 0
        },
        {
            "id": 5,
            "menuName": "商品采购单",
            "path": "views/SystemSetting/ProductSalesSummary/index",
            "sort": 1,
            "label": "商品采购单",
            "hidden": 0,
            "menuKey": "productSalesSummary",
            "parentIds": "2,5",
            "icon": "",
            "children": null,
            "pid": 2
        },
        {
            "id": 6,
            "menuName": "订单管理",
            "path": "views/Order/index",
            "sort": 2,
            "label": "订单管理",
            "hidden": 0,
            "menuKey": "order",
            "parentIds": "6",
            "icon": "el-icon-s-order",
            "children": null,
            "pid": 0
        },
        {
            "id": 7,
            "menuName": "订单列表",
            "path": "views/Order/index",
            "sort": 3,
            "label": "订单列表",
            "hidden": 0,
            "menuKey": "order",
            "parentIds": "6,7",
            "icon": "el-icon-s-order",
            "children": null,
            "pid": 6
        },
        {
            "id": 1,
            "menuName": "门店管理",
            "path": "views/Store/index",
            "sort": 4,
            "label": "门店管理",
            "hidden": 0,
            "menuKey": "store",
            "parentIds": "1",
            "icon": "el-icon-s-shop",
            "children": null,
            "pid": 0
        },
        {
            "id": 2,
            "menuName": "商品管理",
            "path": null,
            "sort": 5,
            "label": "商品管理",
            "hidden": 0,
            "menuKey": "productSet",
            "parentIds": "2",
            "icon": "el-icon-sell",
            "children": null,
            "pid": 0
        },
        {
            "id": 3,
            "menuName": "商品管理",
            "path": "views/Product/index",
            "sort": 6,
            "label": "商品管理",
            "hidden": 0,
            "menuKey": "product",
            "parentIds": "2,3",
            "icon": null,
            "children": null,
            "pid": 2
        },
        {
            "id": 4,
            "menuName": "商品分类",
            "path": "views/SystemSetting/Category/index",
            "sort": 7,
            "label": "商品分类",
            "hidden": 0,
            "menuKey": "category",
            "parentIds": "2,4",
            "icon": null,
            "children": null,
            "pid": 2
        },
        {
            "id": 8,
            "menuName": "售后列表",
            "path": "views/AfterSales/index",
            "sort": 8,
            "label": "售后列表",
            "hidden": 0,
            "menuKey": "afterSales",
            "parentIds": "6,8",
            "icon": "el-icon-service",
            "children": null,
            "pid": 6
        },
        {
            "id": 9,
            "menuName": "活动管理",
            "path": "views/Coupon/index",
            "sort": 9,
            "label": "活动管理",
            "hidden": 0,
            "menuKey": "coupon",
            "parentIds": "9",
            "icon": "el-icon-s-ticket",
            "children": null,
            "pid": 0
        },
        {
            "id": 10,
            "menuName": "公益服务",
            "path": "views/activity/index",
            "sort": 10,
            "label": "公益服务",
            "hidden": 0,
            "menuKey": "activity",
            "parentIds": "10",
            "icon": "el-icon-s-ticket",
            "children": null,
            "pid": 0
        },
        {
            "id": 13,
            "menuName": "资金记录",
            "path": "views/Finance/FinancialRecords/index",
            "sort": 20,
            "label": "资金记录",
            "hidden": 0,
            "menuKey": "financialRecords",
            "parentIds": "11,13",
            "icon": null,
            "children": null,
            "pid": 11
        },
        {
            "id": 14,
            "menuName": "员工工资",
            "path": "views/Finance/EmplyeeIncome/index",
            "sort": 21,
            "label": "员工工资",
            "hidden": 0,
            "menuKey": "emplyeeIncome",
            "parentIds": "11,14",
            "icon": "",
            "children": null,
            "pid": 11
        },
        {
            "id": 15,
            "menuName": "系统管理",
            "path": "",
            "sort": 22,
            "label": "系统管理",
            "hidden": 0,
            "menuKey": "systemSetting",
            "parentIds": "15",
            "icon": "el-icon-setting",
            "children": null,
            "pid": 0
        },
        {
            "id": 16,
            "menuName": "角色管理",
            "path": "views/SystemSetting/Role/index",
            "sort": 23,
            "label": "角色管理",
            "hidden": 0,
            "menuKey": "role",
            "parentIds": "15,16",
            "icon": null,
            "children": null,
            "pid": 15
        },
        {
            "id": 17,
            "menuName": "用户管理",
            "path": "views/SystemSetting/User/index",
            "sort": 24,
            "label": "用户管理",
            "hidden": 0,
            "menuKey": "user",
            "parentIds": "15,17",
            "icon": null,
            "children": null,
            "pid": 15
        },
        {
            "id": 18,
            "menuName": "用户审核",
            "path": "views/SystemSetting/CheckUser/index",
            "sort": 25,
            "label": "用户审核",
            "hidden": 0,
            "menuKey": "checkUser",
            "parentIds": "15,18",
            "icon": null,
            "children": null,
            "pid": 15
        }
    ]
}

store代码

import { getLoginResources } from '@/api/menu';
import { menus } from '@/api/menu';
import utils from '@/utils/utils';
import Layout from '@/layout'
import Nest2 from '@/layout/Nest2.vue'
import router from '@/router'

const Types = {
  SET_MENU: 'SET_MENU',
};
// const rm = new RouteMenu()

const menu = {
  state: {
    activeMenuInfo: { activeMenuObj: {}, menuList: [] },
    menus: [],
  },
  actions: {
    getMenu({ commit }, menus) {
      return new Promise(async (resolve, rejct) => {
        const res = await getLoginResources();
        if (res.status) {
          //将数组变成层级树
          res.data =
            res.data &&
            res.data.map((item) => ({
              ...item,
              menuName: item.label,
              label: item.label,
              // menuKey: item.path,
              // hidden: item.hidden === 0,
            }));
          let menus = res.data;
          //菜单不是树形的，先将菜单变成树形结构
          menus = rebuildTree(res.data);
        
            //遍历菜单添加路由
          menus.forEach(menu => {
            //获取路由深度
            let deep = getRouteDeep(menu, 1, true)
            //路由对象
            let obj = {}
            generateRoute(menu, obj, 1, deep, '')
            console.log(obj);
            router.addRoute(obj)
          })

          console.log(router.getRoutes());
          commit('SET_MENU', menus);
          resolve(menus);
        }
        // commit('SET_MENU', menus);
        // resolve(menus);
      });
    },
  },
  mutations: {
    //设置菜单
    [Types.SET_MENU]: (state, data) => {
      state.menus = data;
    },
  },
  namespaced: true,
};
export default menu;

最终生成的路由结构，以systemSetting下的checkUser和user为例

image.png

注释掉本地router中注册的路由，点击菜单可以正常访问就是动态路由没问题

但是会遇到另外一个问题，刷新页面后会跳转到404问题

需要在路由导航守卫中进行处理beforeEach，判断store中menus的长度为空的话重新获取菜单结构，重新生成就可以了，然后将路由重定向到to的路由

用到的工具类

function getRouteDeep(menu, deep, addRoute) {
  //判断obj.children的长度是否大于0，大于0则deep+1，否则返回0
  if (menu.children.length) {
    deep++
    menu.children.forEach(item => {
      getRouteDeep(item, deep)
    })
  }
  //包含layout和Nest2的层级
  return deep + 2
}
//生成路由
/**
 *
 * @param {*} obj 路由对象
 * @param {*} index 当前路由深度
 * @param {*} deep 总路由深度
 */
function generateRoute(menu, obj, index, deep, path) {
  obj.path = index === 1 ? '/' : ''
  // // / 重定向到home
  // if (menu.menuKey === 'home') {
  //   obj.redirect = '/home'
  // }

  if (index === 1) {
    obj.component = Layout
    // obj.path = '/'
    if (menu.children.length) {
      obj.path += menu.menuKey
    }
  }
  if (index === 2) {
    obj.component = Nest2
    // obj.path = ''
  }
  // //其他层级
  if (index === 3) {
    obj.component = () => import(`@/${menu.path}.vue`)
    obj.path += menu.menuKey
    obj.name = menu.menuKey
  }
  //路由小于deep时，要生成children
  if (index < deep) {
    obj.children = []
    //children多个
    if (menu.children.length > 0) {
      for (let v of menu.children) {
        const objSub = {}
        obj.children.push(generateRoute(v, objSub, index + 1, deep, obj.path))
      }
    } else {
      const objCur = {}
      obj.children.push(generateRoute(menu, objCur, index + 1, deep, obj.path))
    }
  }
  return obj
}

router代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout'
import Nest2 from '@/layout/Nest2.vue'
import NProgress from 'nprogress'
import Utils from '@/utils/utils'
import { constantRouterMap } from './constant'
import { LoaclRouterMap } from './local'
import store from '@/store'
// import {rebuildTree,getRouteDeep} from "@/store/modules/menu"
Vue.use(VueRouter)
//固定路由
const routes = [
  {
    path: '/',
    name: 'Layout',
    redirect: '/home',
    component: Layout,
    children: [
      {
        path: 'home',
        name: 'home',
        component: () => import('@/views/HomeView.vue'),
        meta: {
          label: '首页',
          cache: true,
          closable: false
        }
      },
    //本地一些404和详情页路由
      ...constantRouterMap,
      ...LoaclRouterMap
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue')
  }
]

//处理路由导航守卫
let router = new VueRouter({
  routes
})

//重写push方法，跳转相同路由报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)

  return originalPush.call(this, location).catch(err => err)
}


router.beforeEach(async (to, from, next) => {
  console.log(store.state.menu.menus)
  NProgress.start()
  if (store.state.menu.menus.length) {
    //未匹配到的路由
    if (!to.matched || !to.matched.length) {
      next({ name: 'Error404' })
      return
    }
    // console.log(Utils.getStorage('userInfo'))
    let userInfo = Utils.getStorage('userInfo')
    if (to.path === '/login') {
      next()
      return
    }
    //用户信息存在
    if (!userInfo || Object.keys(userInfo).length === 0) {
      next({ name: 'login' })
      return
    } else {
      next()
      NProgress.done()
      return
    }
  } else {
    router = new VueRouter({
      routes
    })
    store
      .dispatch('menu/getMenu')
      .then(res => {
        res.forEach(menu => {
          //获取路由深度
          let deep = getRouteDeep(menu, 1, true)
          //路由对象
          let obj = {}
          generateRoute(menu, obj, 1, deep, '')

          router.addRoute(obj)
        })

        console.log(router);
        //重新添加路由后重定向
        next({ ...to, replace: true })
      })
      .catch(err => {
        next({ name: 'home' })
      })
  }
})

export default router

验证跳转到一个不是本地注册的路由里面，刷新路由可以正常访问，即达到目的。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,458评论 6赞 513
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,030评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,879评论 0赞 358
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,278评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,296评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,019评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,633评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,541评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,068评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,181评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,318评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,991评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,670评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,183评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,302评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,655评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,327评论 2赞 358