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