快捷導(dǎo)航

基于iview-admin實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼

更新時(shí)間：2019年10月02日 08:55:25 作者：差點(diǎn)笨死

這篇文章主要介紹了基于iview-admin實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

iview-admin是一個(gè)基于vue和iview組件庫(kù)實(shí)現(xiàn)的管理后臺(tái)前端，本文基于iview-admin最新版本，實(shí)現(xiàn)基于權(quán)限的動(dòng)態(tài)路由加載。

本文代碼可參見(jiàn)：https://github.com/MayBeWrong/iview-admin-dynamic-router

背景：

動(dòng)態(tài)路由：vue的路由，可通過(guò)new Router傳入路由數(shù)組定義實(shí)現(xiàn)，也可以通過(guò)router.addRoutes實(shí)現(xiàn)。通過(guò)router.addRoutes動(dòng)態(tài)傳入路由定義的方式，稱(chēng)之為動(dòng)態(tài)路由。路由數(shù)據(jù)可以全部保存在后臺(tái)數(shù)據(jù)庫(kù)中，也可以將路由配置在前端，后端返回給前端路由權(quán)限信息，然后匹配過(guò)濾，進(jìn)行加載。本文就這兩種方式分別進(jìn)行介紹，并且給出實(shí)現(xiàn)參考。

目標(biāo)：

基于iview-admin最新代碼，實(shí)現(xiàn)兩種不同的路由動(dòng)態(tài)加載方式：

路由(導(dǎo)航菜單)數(shù)據(jù)全部存儲(chǔ)在后臺(tái)
路由數(shù)據(jù)配置在前端，后臺(tái)只存儲(chǔ)權(quán)限信息

注意：本文通過(guò)Mock模擬后端接口

方式1：路由(導(dǎo)航菜單)數(shù)據(jù)全部存儲(chǔ)在后臺(tái)

定義路由數(shù)據(jù)結(jié)構(gòu)體,在文件中：src/mock/data.js

export const routersData = [{
   path: '/pet',//訪問(wèn)路徑
   name: 'Pet',//路由的名字，這個(gè)與i18n有關(guān)，需要唯一
   meta: {
    title: '寵物',//標(biāo)題
    hideInMenu: false,//是否在左側(cè)導(dǎo)航菜單隱藏
    icon: 'logo-freebsd-devil'//圖標(biāo)
   },
   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調(diào)用接口:src/mock/index.js，中增加：

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

實(shí)現(xiàn)一個(gè)ajax調(diào)用：src/api/routers.js中增加：

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

1、在store中定義動(dòng)態(tài)路由相關(guān)邏輯，修改：src/store/module/app.js

引入ajax請(qǐng)求：

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

定義兩個(gè)state,如下

state: {
  .....
  routers: [],//拿到的路由數(shù)據(jù)
  hasGetRouter: false//是否已經(jīng)拿過(guò)路由數(shù)據(jù)
 },

同步增加mutations：

 mutations：{
   ......
   //設(shè)置路由數(shù)據(jù)
  setRouters(state, routers) {
   state.routers = routers
  },
  //設(shè)置是否已經(jīng)拿過(guò)路由
  setHasGetRouter(state, status) {
   state.hasGetRouter = status
  }......}

增加一個(gè)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)
    }
   })
  },
  ........
}

此處用到了一個(gè)函數(shù)：backendMenusToRouters，這個(gè)函數(shù)定義在src/libs/util.js中，用來(lái)對(duì)后端返回的路由數(shù)據(jù)遞歸處理，行程vue的路由。

export const backendMenusToRouters = (menus) => {
 let routers = []
 forEach(menus, (menu) => {
  // 將后端數(shù)據(jù)轉(zhuǎn)換成路由數(shù)據(jù)
  let route = backendMenuToRoute(menu)
  // 如果后端數(shù)據(jù)有下級(jí)，則遞歸處理下級(jí)
  if (menu.children && menu.children.length !== 0) {
   route.children = backendMenusToRouters(menu.children)
  }
  routers.push(route)
 })
 return routers
}

修改src/router/index.js，增加動(dòng)態(tài)路由加入邏輯，主要方法：

  const initRouters = (store) => {
 //這個(gè)人登錄了已經(jīng)
 if (store.state.user.hasGetInfo) {
  //路由加載過(guò)了
  if (store.state.app.hasGetRouter && store.state.app.routers && store.state.app.routers.length > 0) {
   console.log("已經(jīng)加載過(guò)了路由")
  } else {
   //加載路由
   console.log("開(kāi)始加載路由權(quán)限...")
   store.dispatch('getUserMenus').then(routers => {
    //此處routers已經(jīng)是按照權(quán)限過(guò)濾后的路由了，沒(méi)權(quán)限的，不加入路由，無(wú)法訪問(wèn)
    //路由重置一下把404放最后
    const newRouter = new Router({
     routes,
     mode: config.routerModel
    })
    router.matcher = newRouter.matcher;
    //把404加最后面，如果用router.push({name:'xxxx'})這種的話，404頁(yè)面可能空白，用path:'/aa/bb'
    router.addRoutes(routers.concat([{
     path: '*',
     name: 'error_404',
     meta: {
      hideInMenu: true
     },
     component: () => import(/* webpackChunkName: "404" */'@/view/error-page/404.vue')
    }]))
   }).finally(() => {
   })
  }
 }}

每次路由加載之前，都會(huì)判斷是否已經(jīng)初始化過(guò)系統(tǒng)路由，如果沒(méi)有，則初始化。

至此，動(dòng)態(tài)路由基本實(shí)現(xiàn)。文章可能有遺漏和不足,歡迎探討。第二種實(shí)現(xiàn)方式

具體實(shí)現(xiàn)，請(qǐng)參見(jiàn)： https://github.com/MayBeWrong/iview-admin-dynamic-router

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: