vue-admin-element中的動態(tài)加載路由怎么實現(xiàn)

本篇內(nèi)容主要講解“vue-admin-element中的動態(tài)加載路由怎么實現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue-admin-element中的動態(tài)加載路由怎么實現(xiàn)”吧!

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

1. 思路

我們要動態(tài)生成路由，就得有接口，從接口里面獲取路由信息，然后把這些信息動態(tài)添加到路由上展示出來就ok了，仔細看一下這些數(shù)據(jù)，不難發(fā)現(xiàn)，里面有 component 組件，這組件后臺是沒有辦法傳過來的，需要前端自己轉(zhuǎn)換，下面會詳細提到

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

登錄頁面是自帶的且固定的，所以我們就在登錄的時候調(diào)用接口，這樣登錄進去之后就直接看到左側(cè)菜單了，下面在登錄頁面請求的接口，我們把拿到的數(shù)據(jù)存到 session 里面，這是為了刷新數(shù)據(jù)不丟失，可以看到這里面有個 menu 方法，這個方法就是 1. 里面說的，轉(zhuǎn)化 component 組件的方法

import { menu } from '@/utils/menu'   //調(diào)用轉(zhuǎn)化組件的方法

authPowerIndexAjax().then(response => {  //調(diào)用真實的后臺的接口
  let data = response.data.hasMenuList;
  sessionStorage.setItem('hasMenuList',JSON.stringify(data));
  sessionStorage.setItem('test',JSON.stringify(menu(data)))
  this.$router.addRoutes(menu(data));  //動態(tài)添加路由
  let that = this
  that.$router.push({path: '/manager/online-class-children'}) //每次退出重新登陸之后，都回到首頁
  this.loading = false
})

3. 轉(zhuǎn)化 component 組件

這是我們后端傳來數(shù)據(jù)，每個項目數(shù)據(jù)不一樣，所以大家重點看紅色框框圈起來的地方就好了，其他的僅供參考

    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 加一段代碼就行了，這樣子就大功告成了

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

5. 菜單欄（側(cè)邊欄）顯示

上述步驟都完成后，菜單欄也就是側(cè)邊欄是不會顯示的，我們需要把數(shù)據(jù)放到側(cè)邊欄里面，其他的都不動，就把 routes 數(shù)據(jù)換成我們緩存里的數(shù)據(jù)就行了

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

到此，相信大家對“vue-admin-element中的動態(tài)加載路由怎么實現(xiàn)”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！