vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法(無(wú)廢話版本)
前言
最近練習(xí)vue的項(xiàng)目,有關(guān)于后臺(tái)管理系統(tǒng)的動(dòng)態(tài)添加路由部分,根據(jù)思路實(shí)現(xiàn)了基本的功能,在這里記錄一下,等后面學(xué)習(xí)后在進(jìn)行優(yōu)化。
這里只是記錄我個(gè)人最后實(shí)現(xiàn)的思路,本人由于是初學(xué)者,可能思路和代碼有不正確地方,還求多見(jiàn)諒。也請(qǐng)能不吝賜教,一同進(jìn)步。
一 . 封裝一個(gè)處理生產(chǎn)路由的函數(shù)
我們可以封裝一個(gè)函數(shù),這個(gè)函數(shù)專(zhuān)門(mén)用來(lái)幫助我們生產(chǎn)最后添加到路由中的路由對(duì)象。
//map-menu.js
//動(dòng)態(tài)添加路由
const modules = import.meta.glob('../views/*/*.vue') //vite中獲取組件文件的方法
export function mapMenu(navList) { //navList 傳入后臺(tái)接口返回的路由列表
//最終動(dòng)態(tài)添加路由返回?cái)?shù)組
const routerList = []
for (const key of navList) {
routerList.push({
path: `/${key.nUrl.split('/')[2]}`,
name: `${key.nUrl.split('/')[2].toUpperCase()}`,
component: modules[`..${key.nUrl}`]
})
}
return routerList
}注意:這里需要大家自己根據(jù)自己需要的情況進(jìn)行處理,因?yàn)楹蠖私涌趥鬟f過(guò)來(lái)的數(shù)據(jù)不同,所以你需要根據(jù)情況將path,name,component這三個(gè)獲取出來(lái)并最終轉(zhuǎn)換成你需要的。
二. vuex中進(jìn)行調(diào)用
我們封裝好了一個(gè)函數(shù),接下來(lái)我們就需要調(diào)用來(lái)幫助我們動(dòng)態(tài)生產(chǎn)路由,但是有一個(gè)問(wèn)題來(lái)了,我們需要何時(shí)來(lái)進(jìn)行動(dòng)態(tài)生成路由。
這里我個(gè)人理解是:1.在用戶(hù)進(jìn)行登錄后進(jìn)行動(dòng)態(tài)生產(chǎn)路由,將用戶(hù)的菜單生成出來(lái),并保存起來(lái)。 2. 就是在頁(yè)面刷新時(shí)候我們也需要?jiǎng)討B(tài)生成路由,因?yàn)樗⑿马?yè)面路由會(huì)刷新,不再次進(jìn)行動(dòng)態(tài)生成就是丟失,這里我們可以和對(duì)vuex初始化一起進(jìn)行。
// vuex中的user.js模塊
//動(dòng)態(tài)添加路由
import { mapMenu } from '@/util/map-menu.js' //前面封裝的函數(shù)
state: {
userNav: []
},
mutations: {
changeUserNav(state, userNav) {
state.userNav = userNav
//動(dòng)態(tài)添加路由
mapMenu(userNav).forEach((route) => {
router.addRoute(route) //動(dòng)態(tài)添加路由
})
}
},
actions: {
async requestUserNav({ commit }) {
const navList = await getRolesNavRequest()
commit('changeUserNav', navList)
cache.setCache('jxcms-userNav', navList)
}
}
這樣我們就定義好了,只需要調(diào)用
store.dispatch('requestUserNav')就可以動(dòng)態(tài)生成路由。另外,因?yàn)?code>vue-router4.0中將router.addRoutes方法廢除了,所以我們只能使用router.addRoute循環(huán)添加所有的路由。
三,最終完成動(dòng)態(tài)添加路由
前面我們說(shuō)過(guò)了,我們動(dòng)態(tài)添加路由的時(shí)機(jī)就是二個(gè),初始化和登錄時(shí)候,所以我們現(xiàn)在就完成最后的部分。
// vuex中的user.js模塊
//動(dòng)態(tài)添加路由
import { mapMenu } from '@/util/map-menu.js' //前面封裝的函數(shù)
state: {
...
},
mutations: {
...
},
actions: {
async loginUser({ dispatch, commit }, info) {
const loginRes = await loginUser(info)
if (loginRes.uName) {
if (!cache.getCache('jxcms-token')) {
ElMessage({
message: '登錄成功!',
type: 'success'
})
}
commit('changeUser', loginRes)
//本地存儲(chǔ)
cache.setCache('jxcms-user', loginRes)
dispatch('requestUserNav') //執(zhí)行動(dòng)態(tài)生成路由
router.push('/roles')
cache.setCache('jxcms-token', loginRes.token)
} else {
ElMessage({
message: '登錄失敗',
type: 'error'
})
}
}
}
這里我們完成第一個(gè)動(dòng)態(tài)添加路由的時(shí)機(jī),登錄成功時(shí)候,進(jìn)行動(dòng)態(tài)路由添加。
// vuex中的根模塊 index.js
actions: {
initializationData({ dispatch, commit }) { //vuex初始化函數(shù)
const navList = cache.getCache('jxcms-userNav')
commit('changeUserNav', navList) //動(dòng)態(tài)生成路由
//要用同步的
const user = cache.getCache('jxcms-user')
commit('changeUser', user)
}
},
modules: {
user,
nav,
dept,
roles
}
// main.js
//初始化
store.dispatch('initializationData')
這里我們完成了動(dòng)態(tài)生成路由的第二個(gè)時(shí)機(jī):刷新頁(yè)面時(shí),初始化時(shí)候進(jìn)行動(dòng)態(tài)路由生成. 因?yàn)樗⑿马?yè)面時(shí)候用戶(hù)可能是登錄狀態(tài),這樣我們就不能通過(guò)登錄成功來(lái)觸發(fā)動(dòng)態(tài)路由添加,就需要我們主動(dòng)進(jìn)行動(dòng)態(tài)路由生成,在初始化時(shí)候,獲取到本地存儲(chǔ)的菜單信息,如果用戶(hù)沒(méi)有登錄,本地的菜單信息會(huì)被清除。
另外,這里我使用的是commit來(lái)提交mutations,而不是actions函數(shù),這是因?yàn)槲以跍y(cè)試過(guò)程中發(fā)現(xiàn),如果我使用actions,那么我在進(jìn)入路由頁(yè)面前,路由并沒(méi)有創(chuàng)建成功,會(huì)報(bào)錯(cuò),而使用mutations,因?yàn)槭峭降?,所以不?huì)出現(xiàn)這個(gè)情況。這個(gè)問(wèn)題后面如果找到解決辦法,會(huì)重新進(jìn)行修改。
總結(jié)
到此這篇關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)路由添加內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue2實(shí)現(xiàn)圖片的拖拽,縮放和旋轉(zhuǎn)效果的示例代碼
這篇文章主要為大家介紹了如何基于vue2?實(shí)現(xiàn)圖片的拖拽、旋轉(zhuǎn)、鼠標(biāo)滾動(dòng)放大縮小等功能。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以嘗試一下2022-11-11
vue2 如何實(shí)現(xiàn)div contenteditable=“true”(類(lèi)似于v-model)的效果
這篇文章主要給大家介紹了利用vue2如何實(shí)現(xiàn)div contenteditable="true",就是類(lèi)似于v-model的效果,文中給出了兩種解決的思路,對(duì)大家具有一定的參考價(jià)值,有需要的朋友們下面來(lái)一起看看吧。2017-02-02
從Vue轉(zhuǎn)換看Webpack與Vite 代碼轉(zhuǎn)換機(jī)制差異詳解
這篇文章主要為大家介紹了從Vue轉(zhuǎn)換看Webpack與Vite代碼轉(zhuǎn)換機(jī)制差異詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
vue3點(diǎn)擊不同的菜單頁(yè)切換局部頁(yè)面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue3點(diǎn)擊不同的菜單頁(yè)切換局部頁(yè)面實(shí)現(xiàn)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08
在Vue3中為路由Query參數(shù)標(biāo)注類(lèi)型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類(lèi)型,我們就針對(duì)這個(gè)話題如何為路由Query參數(shù)標(biāo)注類(lèi)型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08
vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)
這篇文章主要介紹了vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
結(jié)合康熙選秀講解vue虛擬列表實(shí)現(xiàn)
這篇文章主要為大家介紹了結(jié)合康熙選秀講解vue虛擬列表的原理使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
Vue動(dòng)態(tài)組件實(shí)現(xiàn)異常處理方法
Vue3動(dòng)態(tài)組件怎么進(jìn)行異常處理?下面本篇文章帶大家聊聊Vue3 動(dòng)態(tài)組件異常處理的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02

