vue-router 动态添加路由

vue-router 动态修改路由的 api 有两个:addRoute 和 removeRoute。

具体用法请见 (API 参考 | Vue Router)。

注意:

(1)通过 addRoute 和 removeRoute 添加或删除路由后,不会改变 getRoutes 的结果。

(2)由于是通过函数动态添加的,那么当 vue 实例重新加载时,这些路由就没有了。因此,刷新页面或者通过 url 访问的时候就会出现白屏。

那么如何解决上述问题呢?只需要在页面刷新时重新调用 addRoute 添加路由。

当页面刷新或者通过 url 访问时,会先进行路由匹配,找到路由后才会加载对应的组件,因此,添加路由不能写在组件中,我们可以将添加路由的逻辑写在导航守卫中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const asyncRoutes: RouteRecordRaw = [];


router.beforeEach((to, from, next) => {
if (to.path === "/login") next();

const token = sessionStorage.getItem("token");
if (!token) {
next(`/login?redirect=${to.path}`);
}
else {
// 判断是否已经添加了路由
if (!store.state.routes.length) {
// 添加路由
asyncRoutes.forEach(route => {
router.addRoute(route);
});
// 将添加的路由与静态路由进行整合
store.commit("setRoutes", asyncRoutes);
// 添加了路由后,再次跳转到该路由
next({...to, replace: true});
}
next();
}
});

因为当 vue 实例重载时,vuex 的 state 会被初始化,因此可以通过 store.state.routes.length 来判断是否添加了路由。

next({ ...to, replace: true }) 中的 replace: true 只是一个设置信息,告诉 vue 前一个路由不会被历史记录,因为前一个路由和现在的路由是一样的。