Vue.js：Vue-Router动态路由从服务器接口获取路由数据
目录
需求实现思路1、添加路由2、添加时机3、获取路由配置4、响应式路由5、路由跳转6、路由排序7、更新路由
问题参考文章
文档
https://v3.router.vuejs.org/zh/installation.html
版本号
"vue": "2.6.10",
"vue-router": "3.6.5",
有几种方式实现动态路由：
前端配置完整路由，通过接口返回的数据判断是否可显示，是否可访问前端配置部分路由，由后端接口返回的数据生成新路由抛开路由的思维，是否能直接通过url查询参数或者是动态路径参数解决问题
需求
部分页面通过服务器端接口返回的参数判断是否显示
用户可以添加新的分类，分类和路由的显示方式一致，拥有和路由相同的逻辑，故而采用通过服务端返回数据生成动态路由的方式解决
实现思路
1、添加路由
通过服务端接口返回的数据生成路由，是异步返回的数据，动态添加
可以通过Vue-Router提供的api，动态添加路由数据
addRoute(parentName: string, route: RouteConfig): () => void
文档说:
如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。
我想直接覆盖原有路由，这样路由位置就不变了
实际操作的时候发现：并不会覆盖，控制台会提示路由重复
2、添加时机
应该在路由跳转之前进行
router.beforeEach(async (to, from, next) => {
// 需要有一个全局变量记录是否添加过
if (!globalData.hasAddDynamicRoute) {
await Store.dispatch('router/updateDynamicRoutes')
globalData.hasAddDynamicRoute = true
}
})
3、获取路由配置
该接口获取的路由数据是一维数组，和路由配置格式不一样
// 不要使用this.$router.options.routes
getRoutes(): RouteRecord[]
页面上显示的时候，需要从vuex获取路由信息，可以及时刷新页面数据
4、响应式路由
既然是动态路由，所以需要响应式，当路由数据发生变化时，可以及时的获取通知
通过vuex状态管理实现
// store/modules/router.js
export default {
namespaced: true,
state: {
routes: [],
},
getters: {
// 返回路由数据
getRoutes(state) {
return state.routes
}
},
mutations: {
setRoutes(state, routes) {
state.routes = routes
},
},
actions: {
async updateDynamicRoutes({ commit }, userinfo) {
// 添加动态路由
await addDynamicRoutes()
// 获取完整的路由信息
const routes = router.getRoutes()
commit('setRoutes', routes)
},
},
}
5、路由跳转
动态路由首次跳转的时候，动态路由还没有添加，需要转换处理
// 根据 to.name 来判断是否为动态路由
if (!to.name) {
// 当前路由是动态的，确定是否存在
if (router.getRoutes().findIndex((i) => i.path === to.path) !== -1) {
next({ ...to, replace: true })
} else {
next('/')
}
} else {
next()
}
6、路由排序
添加的路由只能在最后，无法指定插入位置
通过meta元数据，添加排序字段order_value，可以在显示的时候实现排序
meta: {
order_value: 1,
},
7、更新路由
如果数据变化，需要更新路由数据，再次添加同样会提示重复
[vue-router] Duplicate named routes definition
更新前需要先重置路由数据
// src/router/index.js
// 路由的创建
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
问题
动态添加的路由，出现空白页面问题，打印添加后的路由，发现component参数是undefined
通过修改component参数的配置方式解决
import Layout from '../views/layout/index.vue'
component: Layout,
// 修改为
component: () => import('../views/layout/index.vue'),
参考文章
手摸手教你实现vue的动态路由（router.v3.x版本）
