Vue2.x动态添加路由实现

适用于：Vue2.x VueRouter3.x
动态添加路由一般应用于受权限控制的路由菜单，由后端返回可以判断该角色具有的权限，前端处理出一份符合权限的路由表，使用addRoutes方法动态添加权限路由。

router.beforeEach(async (to, from, next) => {
  if (token) {
    /* has token */
    if (to.path === "/login") {
      next({ path: "/home" });
    } else {
      // 是否刷新了浏览器
      if (刷新了浏览器) {
        router.addRoutes(asyncRouter)
        //如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由
        next({ ...to, replace: true })
      }
      next()
    }
  } else {
    if (whiteList.includes(to.name)) {
      // 在免登录白名单，直接进入
      next();
    } else {
      next({ path: "/login" });
    }
  }
});

router.afterEach(() => {
  
});