技術標籤：vuevuejavascriptvue.js

很多時候使用vue開發後臺管理系統需要動態選單許可權，這樣的話前端不能寫一些靜態的路由地址，只能寫一些如login、404等路由，其他路由基本都是後端的同學通過介面返回給前端的，那要如何配置呢？

話不多說直接上程式碼

1、整體專案結構

2、本地路由配置

在專案src/router目錄中新建一個router.js檔案，寫入本地的路由配置

import Home from '@/views/home'
export default [{
    path: '/login',
    name: 'login',
    title: false,
    meta: {
      title: "登入"
    },
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/404',
    name: '404',
    title: false,
    meta: {
      title: "error"
    },
    component: () => import('@/views/error/404.vue')
  }
]
 

3、動態路由方法配置

在src祕錄中新建utils資料夾，在utils中建立兩個js檔案，menufilter.js(處理元件路由邏輯)和lazyLoading.js(動態處理與返回路由例項元件)

1、menufilter.js

import {
  lazy
} from './lazyLoading' //引入lazyLoading.js檔案，返回的是元件例項
import Home from '../views/home' //引入主路由元件

export function Menufilter(data) {
  //data為login.vue元件中，登陸成功後，獲取後臺給的選單資料
  let routers = [] //定義一個空陣列
  let chiObj = {}  //定義一個空物件
  data.forEach((item, index) => {
    let childrenArr = [];
    item.children.forEach((items, indexs) => {
      let COMPONENT = lazy(items.path)  //關鍵點，items.path是元件的路徑，呼叫lazy函式處理
      //組織子路由的各個屬性
      chiObj = {
        path: items.title,
        component: COMPONENT,
        name: items.name,
        key: items.key,
        parentId: items.parentId,
        meta: {
          title: items.name
        },
      }
      childrenArr.push(chiObj)
    })
    //組織父路由的各個屬性
    let objRou = {
      path: '/',
      component: Home,
      title: item.title,
      name: item.name,
      key: item.key,
      children: childrenArr,
      meta: {
        title: item.name
      },
    }
    if (!item.title) {
      objRou.redirect = item.children[0].title
    }
    routers.push(objRou)
  })
  return routers
}
 

2、lazyLoading.js

function lazy(name) {
  return () => import(`@/views${name}.vue`)
}
export {
  lazy
}

4、登入獲取路由配置

login.vue元件

<template>
  xxx
</template>

<script>
import { Menufilter } from "../../utils/menufilter";
import { resetRouter} from "@/router/index.js";
resetRouter
...
methods：{
    //請求獲取選單方法
   XXX().then((data)=>{
    //重置路由例項
       resetRouter()
    //把後端同學給的路由選單存一份至localStorage中
     localStorage.setItem("routes", JSON.stringify(data));
    //呼叫Menufilter方法處理選單
     this.$router.options.routes = this.$router.options.routes.concat(
        Menufilter(data)
      );
     //把處理好的選單addRoutes至Routes例項中
     this.$router.addRoutes(Menufilter(data));
    })
//
}
</script>
 

5、路由主邏輯

在專案src/router目錄中新建一個index.js檔案

import Router from 'vue-router'
import Cookies from 'js-cookie'
import routes from './routers'
import {
  Menufilter
} from "../utils/menufilter";
Vue.use(Router)

//處理多次點選已選路由報錯問題
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

//獲取登陸時存入localStorage中的路由選單資料
//重新整理頁面時，獲取登陸時存入localStorage中的選單資料，重新載入處理路由選單
let routesData = JSON.parse(localStorage.getItem("routes"));

//例項化Router
const createRouter = () => new Router({
  mode: 'history',
  routes: routes
})

const router = createRouter() 

//重新例項化router,該方法是為了解決，切換使用者時，router預設不會重新例項化，這樣就會導致，之前addRoutes至router的路由元件依然存在，如果需要解決這個問題，只需要在login.vue元件中呼叫此方法
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
  router.options.routes = routes
}

//routesData不等於空時，利用Menufilter函式處理路由並返回add至router路由例項中
if (routesData != null) {
  router.options.routes = router.options.routes.concat(Menufilter(routesData));
  router.addRoutes(Menufilter(routesData));
}

到此，動態路由已經配置完成！！！