vue-router4.0 关于后台管理系统权限动态添加路由解决方案

最新推荐文章于 2026-07-31 12:52:17 发布

原创

最新推荐文章于 2026-07-31 12:52:17 发布 · 3.7k 阅读

本文介绍了在Vue Router 4.0中，由于`addRoutes`被`addRoute`取代，导致动态添加路由时遇到的问题及解决方案。在路由守卫中，通过`hasRoute`和`generateRoute`方法判断并动态添加路由，解决了无限循环和路由无法匹配的问题。提供的方案适用于后台管理系统权限控制，并给出了参考项目地址。

首先说明一下vue-router4.0删除了 addRoutes的方法, 而是用addRoute代替。那么意味着我们动态添加路由的时候需要一个一个的添加。看下官方文档解释，添加新路由同时需要触发新路由才能显示页面
在这里插入图片描述
先看下这种方式：在路由守卫中添加动态路由（router4.0中next为可选）

 	// 获取权限的路由数组
      const list = await store.dispatch("setUserInfo");
      list.forEach((item) => {
   
   
        router.addRoute(item);
      });
      return to.fullPath;
      // 或者return true

表面上跟以前的添加没有太大的问题，然而如果使用return to.fullpath跳转，页面会进行无限循环，而使用return true跳转则会显示无法匹配该路由。这虽然有很多疑惑，但我们还是重回到文档的解析，文档中给了一个路由守卫动态添加路由的解决方案。
在这里插入图片描述
从红色框中看出，我们进行路由跳转的时候需要判断是否已经添加过路由了，按照这样的方法，那我也来写两个方法进行判断，我们把代码改进一下

	// 获取权限的路由数组
      const list = await store.dispatch("setUserInfo");
      if (hasRoute(to)) {
   
   
         const result = generateRoute(to, serviceRouter);
        // result.flag 判断是否有匹配到的路由, false则跳转到404页面