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

Posted on by

先看一下 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。

推薦閱讀：