文檔
- https://v3.router.vuejs.org/zh/installation.html
版本號(hào)
"vue": "2.6.10",
"vue-router": "3.6.5",
有幾種方式實(shí)現(xiàn)動(dòng)態(tài)路由：
- 前端配置
完整路由，通過(guò)接口返回的數(shù)據(jù)判斷是否可顯示，是否可訪問(wèn) - 前端配置
部分路由，由后端接口返回的數(shù)據(jù)生成新路由 - 拋開(kāi)路由的思維，是否能直接通過(guò)
url查詢參數(shù)或者是動(dòng)態(tài)路徑參數(shù)解決問(wèn)題
需求
部分頁(yè)面通過(guò)服務(wù)器端接口返回的參數(shù)判斷是否顯示
用戶可以添加新的分類，分類和路由的顯示方式一致，擁有和路由相同的邏輯，故而采用通過(guò)服務(wù)端返回?cái)?shù)據(jù)生成動(dòng)態(tài)路由的方式解決
實(shí)現(xiàn)思路
1、添加路由
通過(guò)服務(wù)端接口返回的數(shù)據(jù)生成路由，是異步返回的數(shù)據(jù)，動(dòng)態(tài)添加
可以通過(guò)Vue-Router提供的api，動(dòng)態(tài)添加路由數(shù)據(jù)
addRoute(parentName: string, route: RouteConfig): () => void
文檔說(shuō):
如果該路由規(guī)則有 name，并且已經(jīng)存在一個(gè)與之相同的名字，則會(huì)覆蓋它。
我想直接覆蓋原有路由，這樣路由位置就不變了
實(shí)際操作的時(shí)候發(fā)現(xiàn)：并不會(huì)覆蓋，控制臺(tái)會(huì)提示路由重復(fù)
2、添加時(shí)機(jī)
應(yīng)該在路由跳轉(zhuǎn)之前進(jìn)行
router.beforeEach(async (to, from, next) => {
// 需要有一個(gè)全局變量記錄是否添加過(guò)
if (!globalData.hasAddDynamicRoute) {
await Store.dispatch('router/updateDynamicRoutes')
globalData.hasAddDynamicRoute = true
}
})
3、獲取路由配置
該接口獲取的路由數(shù)據(jù)是一維數(shù)組，和路由配置格式不一樣
// 不要使用this.$router.options.routes
getRoutes(): RouteRecord[]
頁(yè)面上顯示的時(shí)候，需要從vuex獲取路由信息，可以及時(shí)刷新頁(yè)面數(shù)據(jù)
4、響應(yīng)式路由
既然是動(dòng)態(tài)路由，所以需要響應(yīng)式，當(dāng)路由數(shù)據(jù)發(fā)生變化時(shí)，可以及時(shí)的獲取通知
通過(guò)vuex狀態(tài)管理實(shí)現(xiàn)
// store/modules/router.js
export default {
namespaced: true,
state: {
routes: [],
},
getters: {
// 返回路由數(shù)據(jù)
getRoutes(state) {
return state.routes
}
},
mutations: {
setRoutes(state, routes) {
state.routes = routes
},
},
actions: {
async updateDynamicRoutes({ commit }, userinfo) {
// 添加動(dòng)態(tài)路由
await addDynamicRoutes()
// 獲取完整的路由信息
const routes = router.getRoutes()
commit('setRoutes', routes)
},
},
}
5、路由跳轉(zhuǎn)
動(dòng)態(tài)路由首次跳轉(zhuǎn)的時(shí)候，動(dòng)態(tài)路由還沒(méi)有添加，需要轉(zhuǎn)換處理
// 根據(jù) to.name 來(lái)判斷是否為動(dòng)態(tài)路由
if (!to.name) {
// 當(dāng)前路由是動(dòng)態(tài)的，確定是否存在
if (router.getRoutes().findIndex((i) => i.path === to.path) !== -1) {
next({ ...to, replace: true })
} else {
next('/')
}
} else {
next()
}
6、路由排序
添加的路由只能在最后，無(wú)法指定插入位置
通過(guò)meta元數(shù)據(jù)，添加排序字段order_value，可以在顯示的時(shí)候?qū)崿F(xiàn)排序
meta: {
order_value: 1,
},
7、更新路由
如果數(shù)據(jù)變化，需要更新路由數(shù)據(jù)，再次添加同樣會(huì)提示重復(fù)
[vue-router] Duplicate named routes definition
更新前需要先重置路由數(shù)據(jù)
// src/router/index.js
// 路由的創(chuàng)建
function createRouter() {
return new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
})
}
const router = createRouter()
// 重置路由
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
問(wèn)題
動(dòng)態(tài)添加的路由，出現(xiàn)空白頁(yè)面問(wèn)題，打印添加后的路由，發(fā)現(xiàn)component參數(shù)是undefined文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-712586.html
通過(guò)修改component參數(shù)的配置方式解決文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-712586.html
import Layout from '../views/layout/index.vue'
component: Layout,
// 修改為
component: () => import('../views/layout/index.vue'),
參考文章
- 手摸手教你實(shí)現(xiàn)vue的動(dòng)態(tài)路由（router.v3.x版本）
到了這里，關(guān)于Vue.js：Vue-Router動(dòng)態(tài)路由從服務(wù)器接口獲取路由數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
