模拟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项目中