• 模拟vue动态路由


    先说明下router这个实例对象下的addRoutes方法:这个方法传入一个数组,其实就是一个新的路由表单,它不会覆盖掉原来旧的路由表单,而是采用合并的原则,类似于React中的setState方法;

      // 后台返回的菜单数据
      let menuList = [
        {
          text: '首页',
          url: '/main',
          children: []
        }, {
          text: '采购管理',
          url: '/purchase',
          children: [
            {
              text: '分供方管理',
              url: '/supplier',
              children: [
                {
                  text: '潜在供应商',
                  url: '/supplier/potentialSupplier',
                  children: []
                },
                {
                  text: '供应商名录',
                  url: '/supplier/supplierResources',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    
      // 静态路由表单
      let router = [
        {
          path: '/',
          meta: { title: '布局' },
          component: () => import('@/layout/Index'),
          children: []
        },
        {
          path: '*',
          meta: { title: '404' },
          component: () => import('@/404'),
        }
      ]
    
      function getMenuList() {
        // const rightList = $store.state.menuList // 从vuex或者本地获取菜单数据,这里是menuList
        // const currentRoutes=router.options.routes // 获取路由中的静态路由表单,这里是router
        let res = getRouterData(menuList, router[0].children)
        router.addRoutes(router)  // 与旧的路由表单采用合并原则,重新挂载路由
      }
    
      // 递归生成路由表单
      function getRouterData(menuList, arr) {
        menuList.forEach(item => {
          let obj = {
            path: item.url,
            meta: { title: item.text },
            component: `@/views${item.url}/Index`,
            children: []
          }
          arr.push(obj)
          if (item.children.length != 0) {
            getRouterData(item.children, obj.children)
          }
        })
        return router[0].children
      }
    
      getMenuList()
    
      console.log("动态生成的路由表单", router);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    以上只是一个demo,router.addRoutes方法在这里是不能用的,因为没有router实例,只是方便大家理解,具体还是应用在vue项目

  • 相关阅读:
    Android UT开发简介
    链表(1)
    DC电源模块对效率有什么要求?
    你我都会遇到的需求:如何导出MySQL中的数据~ 简单!实用!
    启航编程之海:那些引领我探索与成长的计算机书籍
    10_12C++
    CVPR'22 | 基于可形变关键点模型的图像驱动技术
    图文轻松说透 K8S Pod 各种驱逐场景
    黑客技术(网络安全)自学2024
    创建spring boot后启动报错: Failed to bind properties under ‘spring.datasource‘
  • 原文地址:https://blog.csdn.net/m0_50441807/article/details/126600810