關(guān)于vue-admin-element中的動(dòng)態(tài)加載路由
先看一下 vue-admin-element 的目錄，對(duì)于新手來(lái)說(shuō)，看明白項(xiàng)目的目錄很重要，這些目錄都是自動(dòng)生成的
1. 思路
我們要?jiǎng)討B(tài)生成路由，就得有接口，從接口里面獲取路由信息，然后把這些信息動(dòng)態(tài)添加到路由上展示出來(lái)就ok了，仔細(xì)看一下這些數(shù)據(jù)，不難發(fā)現(xiàn)，里面有 component 組件，這組件后臺(tái)是沒(méi)有辦法傳過(guò)來(lái)的，需要前端自己轉(zhuǎn)換，下面會(huì)詳細(xì)提到
2. 后臺(tái)第一個(gè)頁(yè)面就是登錄頁(yè)面
登錄頁(yè)面是自帶的且固定的，所以我們就在登錄的時(shí)候調(diào)用接口，這樣登錄進(jìn)去之后就直接看到左側(cè)菜單了，下面在登錄頁(yè)面請(qǐng)求的接口，我們把拿到的數(shù)據(jù)存到 session 里面，這是為了刷新數(shù)據(jù)不丟失，可以看到這里面有個(gè) menu 方法，這個(gè)方法就是 1. 里面說(shuō)的，轉(zhuǎn)化 component 組件的方法
import { menu } from '@/utils/menu' //調(diào)用轉(zhuǎn)化組件的方法authPowerIndexAjax().then(response => { //調(diào)用真實(shí)的后臺(tái)的接口
let data = response.data.hasMenuList;
sessionStorage.setItem('hasMenuList',JSON.stringify(data));
sessionStorage.setItem('test',JSON.stringify(menu(data)))
this.$router.addRoutes(menu(data)); //動(dòng)態(tài)添加路由
let that = this
that.$router.push({path: '/manager/online-class-children'}) //每次退出重新登陸之后，都回到首頁(yè)
this.loading = false
})
3. 轉(zhuǎn)化 component 組件
這是我們后端傳來(lái)數(shù)據(jù)，每個(gè)項(xiàng)目數(shù)據(jù)不一樣，所以大家重點(diǎn)看紅色框框圈起來(lái)的地方就好了，其他的僅供參考
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. 剛剛上文提到的,防止刷新菜單就消失的問(wèn)題
在 main.js 加一段代碼就行了，這樣子就大功告成了
// 動(dòng)態(tài)添加路由
if (sessionStorage.getItem('hasMenuList') != null) {
sessionStorage.setItem('test',JSON.stringify(menu(b)))
router.addRoutes(menu(b));
}
5. 菜單欄（側(cè)邊欄）顯示
上述步驟都完成后，菜單欄也就是側(cè)邊欄是不會(huì)顯示的，我們需要把數(shù)據(jù)放到側(cè)邊欄里面，其他的都不動(dòng)，就把 routes 數(shù)據(jù)換成我們緩存里的數(shù)據(jù)就行了
return JSON.parse(sessionStorage.getItem('test'))
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3獲取DOM節(jié)點(diǎn)的3種方式實(shí)例
Vue本來(lái)無(wú)需操作DOM來(lái)更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點(diǎn)的3種方式,需要的朋友可以參考下2023-02-02
VueX 提供了一個(gè)全局都可以使用的數(shù)據(jù)管理倉(cāng)庫(kù)，不用考慮父子傳值之類的問(wèn)題，并且可以跨頁(yè)面?zhèn)鬟f數(shù)據(jù)，提高了可維護(hù)性，這篇文章主要介紹了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以參考下2022-12-12
Vue2遞歸組件實(shí)現(xiàn)樹(shù)形菜單
這篇文章主要為大家詳細(xì)介紹了Vue2遞歸組件實(shí)現(xiàn)樹(shù)形菜單的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Vue狀態(tài)管理庫(kù)Pinia詳細(xì)介紹
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具，簡(jiǎn)單來(lái)說(shuō)相當(dāng)于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以參考下2022-08-08
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了封裝Vue Element的table表格組件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-08-08
vue中對(duì)虛擬dom的理解知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了一篇關(guān)于vue中對(duì)虛擬dom的理解知識(shí)點(diǎn)總結(jié)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)參考下。2021-06-06
vue移動(dòng)端裁剪圖片結(jié)合插件Cropper的使用實(shí)例代碼
本篇文章主要介紹了vue移動(dòng)端裁剪圖片結(jié)合插件Cropper的使用實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue中then后的返回值解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)（模擬服務(wù)端返回?cái)?shù)據(jù)）
這篇文章主要介紹了vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)（模擬服務(wù)端返回?cái)?shù)據(jù)），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08