關於vue-admin-element中的動態加載路由

先看一下 vue-admin-element 的目錄,對於新手來說,看明白項目的目錄很重要,這些目錄都是自動生成的

1. 思路

我們要動態生成路由,就得有接口,從接口裡面獲取路由信息,然後把這些信息動態添加到路由上展示出來就ok瞭,仔細看一下這些數據,不難發現,裡面有 component 組件,這組件後臺是沒有辦法傳過來的,需要前端自己轉換,下面會詳細提到

2. 後臺第一個頁面就是登錄頁面

登錄頁面是自帶的且固定的,所以我們就在登錄的時候調用接口,這樣登錄進去之後就直接看到左側菜單瞭,下面在登錄頁面請求的接口,我們把拿到的數據存到 session 裡面,這是為瞭刷新數據不丟失,可以看到這裡面有個 menu 方法,這個方法就是 1. 裡面說的,轉化 component 組件的方法

import { menu } from '@/utils/menu'   //調用轉化組件的方法
authPowerIndexAjax().then(response => {  //調用真實的後臺的接口
  let data = response.data.hasMenuList;
  sessionStorage.setItem('hasMenuList',JSON.stringify(data));
  sessionStorage.setItem('test',JSON.stringify(menu(data)))
  this.$router.addRoutes(menu(data));  //動態添加路由
  let that = this
  that.$router.push({path: '/manager/online-class-children'}) //每次退出重新登陸之後,都回到首頁
  this.loading = false
})

3. 轉化 component 組件

這是我們後端傳來數據,每個項目數據不一樣,所以大傢重點看紅色框框圈起來的地方就好瞭,其他的僅供參考

    if (item.menu_url.length == 0) {
      item.path = '/'+index
      item.component = () => import('@/layout')
      item.meta = {
        title:item.name
      }
    } else {
      item.path = item.menu_url
      let str = item.menu_url
      item.component = () => import(`@/views${str}.vue`)
      item.meta = {
        title:item.name
      }
    }

4. 剛剛上文提到的,防止刷新菜單就消失的問題

在 main.js 加一段代碼就行瞭,這樣子就大功告成瞭

// 動態添加路由
if (sessionStorage.getItem('hasMenuList') != null) {
  sessionStorage.setItem('test',JSON.stringify(menu(b)))
  router.addRoutes(menu(b));
}

5. 菜單欄(側邊欄)顯示

上述步驟都完成後,菜單欄也就是側邊欄是不會顯示的,我們需要把數據放到側邊欄裡面,其他的都不動,就把 routes 數據換成我們緩存裡的數據就行瞭

return JSON.parse(sessionStorage.getItem('test'))

以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: