關(guān)于vue-admin-element中的動(dòng)態(tài)加載路由
先看一下 vue-admin-element 的目錄,對(duì)于新手來(lái)說,看明白項(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)是沒有辦法傳過來(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. 里面說的,轉(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. 剛剛上文提到的,防止刷新菜單就消失的問題
在 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)文章
vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)
這篇文章主要介紹了vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10element的el-form和el-table嵌套使用實(shí)現(xiàn)
本文主要介紹了element的el-form和el-table嵌套使用實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08axios發(fā)送post請(qǐng)求,提交圖片類型表單數(shù)據(jù)方法
下面小編就為大家分享一篇axios發(fā)送post請(qǐng)求,提交圖片類型表單數(shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03