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

2022-08-13 14:00:02

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'))

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。