【转】vue 动态路由实现

方案一：
运用场景：系统根据登录账号的权限，动态加载左侧菜单; 后端直接返回的路由菜单数据

实现：

1.获取的数据格式

  • 一级目录component: ”components/main”
  • 二级目录component: ”components/parentView”
  • 目录下菜单component: "view/organization/user/user1.vue", //实际指向而定
  •  path值不可有重复指向


------------

2.将后端树转化为路由树( libs/util.js )

  •  递归树
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//动态路由
/**
 * @description 将后端菜单树转换为路由树 递归树
 * @param {Array} menus
 * @returns {Array}
 */
export const backendMenusToRouters = (menus) => {
  let routers = []
  forEach(menus, (menu) => {
    // 将后端数据转换成路由数据
    let route = backendMenuToRoute(menu)
    // 如果后端数据有下级，则递归处理下级
    if (menu.children && menu.children.length !== 0 && menu.name != "") {
      route.children = backendMenusToRouters(menu.children)
    }
    routers.push(route)
  })
  // console.log(routers)
  return routers
}
 

  • 处理树
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
/**
 * @description 将后端菜单转换为路由 处理树
 * @param {Object} menu
 * @returns {Object}
 */
const backendMenuToRoute = (menu) => {
  // 具体内容根据自己的数据结构来定，这里需要注意的一点是
  // 原先routers写法是component: () => import('@/view/error-page/404.vue')
  // 经过json数据转换，这里会丢失，所以需要按照上面提过的做转换，下面只写了核心点，其他自行处理
  let route = Object.assign({}, menu)
  // route.component = () => import(`/* webpackChunkName: ${menu.title} */'@/${menu.component}'`)\
 
  // 菜单配置的时候都是矢量图标库里面的图标所以要加上iconfont,ivew-admin里面都是默认的font-family：'Ionicons'=>转成 font-family:'iconfont'
  if(menu.meta){
    route.meta.icon = `iconfont ${menu.meta.icon}`
  } //矢量图标转划
   
  if(menu.component == "components/main"){
    route.component = Main;  //一级菜单判断
  }
  else if(menu.component == "components/parentView"){
    route.component = parentView; //二级菜单判断
  }
  else{
    route.component  = () =>  import(`@/${menu.component}`);
  }
  return route
}
 


  • 左侧菜单数据
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
///////////////动态路由
/**
 * @param {Array} list 通过路由列表得到菜单列表
 * @param access
 * @returns {Array}
 */
export const getUserMenuByRouter = (list) => {
  // console.log(list)
  let res = []
  forEach(list, item => {
 
    //meta没配置，或者配置了，但hideInMenu=false
    if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
      let obj = {
        icon: (item.meta && item.meta.icon) || '',
        name: item.name,
        meta: item.meta
      }
      //有下级子元素或者showAlways=true并且还有权限访问，继续递归处理下级(item.meta && !item.meta.showAlways)
      if ((hasChild(item))) {
        obj.children = getUserMenuByRouter(item.children)
      }
      //如果配置了href,设置href
      if (item.meta && item.meta.href) obj.href = `${baseUrl}`+`${item.meta.href}`
      //加入
      res.push(obj)
    }
  })
  return res
}
 

  • 后台管理踩过的坑
2.1菜单配置使用的是矢量图标库里面的图标所以要加上和iview图标font-family属性不一致；ivew-admin里面都是默认的font-family：'Ionicons'=>转成 font-family:'iconfont'
  *解决* ：这里不可以全局修改属性值，在个别使用到的地方做css的修改。

 2.2对一级菜单、二级菜单的component参数进行分别判断
 
 

3.全局管理并缓存路由

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
// 获取用户相关信息
    getUserInfo ({ state, commit }) {
      let paramer ={
        token:state.token,
        refresData:false,
      }
      // console.log(state.token)
      return new Promise((resolve, reject) => {
        try {
          getUserInfo(paramer).then(res => {
            // console.log(res)
            const data = res.data.result
            // console.log("菜单",JSON.stringify(data.menuRoutes))
            // commit('setAvatar', data.avatar) //头像
 
            commit('setUserName', data.loginName)
            commit('setUserInfo', data)
            commit('setAccess', data.roleInfoDto.roleName) //权限 角色
            commit('setHasGetInfo', true)
            let routers = backendMenusToRouters(data.menuRoutes)
            console.log(routers)
            commit('setRouters', routers)
            commit('setHasGetRouter', true)
 
            localStorage.setItem("getInfo", true);
            localStorage.setItem("router", JSON.stringify(data.menuRoutes));
            resolve(data)
          }).catch(err => {
            reject(err)
          })
        } catch (error) {
          reject(error)
        }
      })
    },
 
 

4.重置路由，在最后添加404页面路径

获取到缓存里的数据，在until.js中的方法转化后得到路由数据，最后加上404页面路径并重置路由
*（InitRouters中的业务逻辑，根据实际情况进行修改）*

  • 除了考虑正常跳转，浏览器刷新，不存在的页面地址都需考虑
  • Tip:浏览器刷新后，路由中的name值可能会消失

*根据缓存中的name值去循环判断（这里name和path在配置的时候是一致的）...实际情况判断...*

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
```html
// version2
const initRouters = (to, next) => {
 
  // 在路由最后动态添加404， path:"*"
  let rou = JSON.parse(localStorage.getItem("router"));
  let routers = backendMenusToRouters(rou);
  routers.push({
    path: '*',
    name: 'error_404',
    meta: {
      hideInMenu: true
    },
    component: () => import('@/view/error-page/404.vue')
  })
  router.addRoutes(routers);
 
  let arr = [];
  let names2 = [];
  let names = getAllNames(rou,arr);
  names2= names.concat(["login","home","error_401","error_500"]);
  console.log(names2)
 
  let path = to.path;
  let path1 = path.substr(path.lastIndexOf('/') + 1);
  console.log(path1)
  console.log(names2.includes(path1))
 
 
  if (to.matched.length > 0 ) {
    next()
  }
  else if (to.name !== null && to.matched.length === 0) {
    next({
      name: 'error_404'
    })
    return
  }
  else {
    next({
      name: path1
    })
  }
}
 

Tip: 路由陷入无线循环的情况：


 
posted @ 2020-01-10 15:35  苏苏苏en  阅读(8664)  评论(0)  编辑  收藏  举报