關(guān)于vue-admin-element中的動態(tài)加載路由
更新時間：2022年08月13日 09:51:03 作者：Hero_rong
這篇文章主要介紹了關(guān)于vue-admin-element的動態(tài)加載路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
先看一下 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'))
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue本來無需操作DOM來更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點的3種方式,需要的朋友可以參考下2023-02-02
VueX 提供了一個全局都可以使用的數(shù)據(jù)管理倉庫，不用考慮父子傳值之類的問題，并且可以跨頁面?zhèn)鬟f數(shù)據(jù)，提高了可維護性，這篇文章主要介紹了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了Vue2遞歸組件實現(xiàn)樹形菜單的相關(guān)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具，簡單來說相當(dāng)于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以參考下2022-08-08
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了封裝Vue Element的table表格組件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-08-08
在本篇文章里小編給大家整理了一篇關(guān)于vue中對虛擬dom的理解知識點總結(jié)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)參考下。2021-06-06
vue移動端裁剪圖片結(jié)合插件Cropper的使用實例代碼
本篇文章主要介紹了vue移動端裁剪圖片結(jié)合插件Cropper的使用實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue中then后的返回值解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)（模擬服務(wù)端返回數(shù)據(jù)）
這篇文章主要介紹了vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)（模擬服務(wù)端返回數(shù)據(jù)），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08