基于iview-admin实现动态路由的示例代码

iview-admin是一个基于vue和iview组件库实现的管理后台前端，本文基于iview-admin最新版本，实现基于权限的动态路由加载。

本文代码可参见：https://github.com/MayBeWrong/iview-admin-dynamic-router

背景：

动态路由：vue的路由，可通过new Router传入路由数组定义实现，也可以通过router.addRoutes实现。通过router.addRoutes动态传入路由定义的方式，称之为动态路由。路由数据可以全部保存在后台数据库中，也可以将路由配置在前端，后端返回给前端路由权限信息，然后匹配过滤，进行加载。本文就这两种方式分别进行介绍，并且给出实现参考。

目标：

基于iview-admin最新代码，实现两种不同的路由动态加载方式：

路由(导航菜单)数据全部存储在后台
路由数据配置在前端，后台只存储权限信息

注意：本文通过Mock模拟后端接口

方式1：路由(导航菜单)数据全部存储在后台

定义路由数据结构体,在文件中：src/mock/data.js

export const routersData = [{
   path: \'/pet\',//访问路径
   name: \'Pet\',//路由的名字，这个与i18n有关，需要唯一
   meta: {
    title: \'宠物\',//标题
    hideInMenu: false,//是否在左侧导航菜单隐藏
    icon: \'logo-freebsd-devil\'//图标
   },
   component: \'components/main\',//组件文件路径，不需要Import
   children: [{//嵌套路由
    path: \'cat\',
    name: \'Cat\',
    meta: {
     title: \'猫咪\',
     hideInMenu: false,
     icon: \'ios-cloudy-night\'
    },
    component: \'view/pet/cat/Cat.vue\'
   }, {
    path: \'dog\',
    name: \'Dog\',
    meta: {
     hideInMenu: false,
     title: \'狗娃\',
     icon: \'ios-color-filter\'
    },
    component: \'view/pet/dog/Dog.vue\'
   }, {
    path: \'pig\',
    name: \'Pig\',
    meta: {
     hideInMenu: false,
     title: \'猪啊\',
     icon: \'ios-contact\'
    },
    component: \'view/pet/pig/Pig.vue\',
    children: [
     {
      path: \'female\',
      name: \'Female\',
      meta: {
       hideInMenu: false,
       title: \'母猪\',
       icon: \'ios-contact\'
      },
      component: \'view/pet/pig/Pig.vue\',
     },
     {
      path: \'male\',
      name: \'Male\',
      meta: {
       hideInMenu: false,
       title: \'公猪\',
       icon: \'ios-contact\'
      },
      component: \'view/pet/pig/Pig.vue\',
     }
    ]
   }]}]

暴露ajax调用接口:src/mock/index.js，中增加：

Mock.mock(/\\/sys\\/routers/, routersData)

实现一个ajax调用：src/api/routers.js中增加：

 export const getRouterReq = (access) => {
   return axios.request({
    url: \'/sys/routers\',
    params: {
     access
    },
    method: \'get\'
 })}

1、在store中定义动态路由相关逻辑，修改：src/store/module/app.js

引入ajax请求：

import {getRouterReq} from \'@/api/routers\'

定义两个state,如下

state: {
  .....
  routers: [],//拿到的路由数据
  hasGetRouter: false//是否已经拿过路由数据
 },

同步增加mutations：

 mutations：{
   ......
   //设置路由数据
  setRouters(state, routers) {
   state.routers = routers
  },
  //设置是否已经拿过路由
  setHasGetRouter(state, status) {
   state.hasGetRouter = status
  }......}

增加一个action：

action:{
........
  getRouters({commit}) {
   return new Promise((resolve, reject) => {
    try {
     getRouterReq().then(res => {
      let routers = backendMenusToRouters(res.data)
      commit(\'setRouters\', routers)
      commit(\'setHasGetRouter\', true)
      resolve(routers)
     }).catch(err => {
      reject(err)
     })
    } catch (error) {
     reject(error)
    }
   })
  },
  ........
}

此处用到了一个函数：backendMenusToRouters，这个函数定义在src/libs/util.js中，用来对后端返回的路由数据递归处理，行程vue的路由。

export const backendMenusToRouters = (menus) => {
 let routers = []
 forEach(menus, (menu) => {
  // 将后端数据转换成路由数据
  let route = backendMenuToRoute(menu)
  // 如果后端数据有下级，则递归处理下级
  if (menu.children && menu.children.length !== 0) {
   route.children = backendMenusToRouters(menu.children)
  }
  routers.push(route)
 })
 return routers
}

修改src/router/index.js，增加动态路由加入逻辑，主要方法：

  const initRouters = (store) => {
 //这个人登录了已经
 if (store.state.user.hasGetInfo) {
  //路由加载过了
  if (store.state.app.hasGetRouter && store.state.app.routers && store.state.app.routers.length > 0) {
   console.log(\"已经加载过了路由\")
  } else {
   //加载路由
   console.log(\"开始加载路由权限...\")
   store.dispatch(\'getUserMenus\').then(routers => {
    //此处routers已经是按照权限过滤后的路由了，没权限的，不加入路由，无法访问
    //路由重置一下把404放最后
    const newRouter = new Router({
     routes,
     mode: config.routerModel
    })
    router.matcher = newRouter.matcher;
    //把404加最后面，如果用router.push({name:\'xxxx\'})这种的话，404页面可能空白，用path:\'/aa/bb\'
    router.addRoutes(routers.concat([{
     path: \'*\',
     name: \'error_404\',
     meta: {
      hideInMenu: true
     },
     component: () => import(/* webpackChunkName: \"404\" */\'@/view/error-page/404.vue\')
    }]))
   }).finally(() => {
   })
  }
 }}

每次路由加载之前，都会判断是否已经初始化过系统路由，如果没有，则初始化。

至此，动态路由基本实现。文章可能有遗漏和不足,欢迎探讨。第二种实现方式

具体实现，请参见： https://github.com/MayBeWrong/iview-admin-dynamic-router

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。