vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法(無(wú)廢話(huà)版本)
前言
最近練習(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-11vue2 如何實(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-10vue3點(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è)話(huà)題如何為路由Query參數(shù)標(biāo)注類(lèi)型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08vue如何封裝自己的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-07Vue動(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