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 前一个路由不会被历史记录，因为前一个路由和现在的路由是一样的。