美文网首页前端开发
vue router动态追加路由

vue router动态追加路由

作者: 小程序前端超市 | 来源:发表于2020-01-09 11:08 被阅读0次

    路由分为静态路由,如事先写好的,公共的路由,如:404、login等
    还有一部分是根据权限接口返回,动态追加的一些页面模块路由,如:user

    在处理权限的时候,可以先允许一些不需要权限认证的路由,如下:

    // 开放的路由,可以直接访问
    const ALLOW_ROUTES = [
      '/login',
      '/buy',
      // ...
    ];
    

    具体路由拦截全在router.beforeEach里处理

    首先如果没有登录,直接跳转登录页

    if (!ALLOW_ROUTES.includes(to.path) && !isLogin) { // 未登录
      next({
        path: '/login',
        replace: true
      });
      return;
    }
    

    如果已登录,使用router.addRoutes追加路由

    if(isLogin && (sessionStorage.getItem('curPath') || to.matched[0].path === '*')  ) {
      sessionStorage.removeItem('curPath');
      // 还原路由(防止路由重复)
      router.matcher = new VueRouter({
        // mode: 'history',
        routes
      }).matcher;
      router.addRoutes(routes: Array<RouteConfig>); // 追加路由
      // util.generateMenu(); // 生成菜单,视具体情况而定
      next({
        path: to.path
      });
      return;
    }
    

    动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

    curPath用于辅助处理

    router.afterEach(to => {
      // 保存路径
      if (to.path !== '/login') {
        sessionStorage.setItem('curPath', JSON.stringify({
          path: to.path
        }));
      }
    })
    

    动态路由主要是根据业务来的,不好写成一个公共的处理方式,具体在什么时候追加路由,要自己去判断,如:刷新、退出登录、重新登录、没有匹配到等操作是否满足

    如果还遇到路由重复的问题,可能是在当前页push同样路由造成的,这里可以先判断一下

    if(router.currentRoute.name !== 'login') {
      router.push({
        name: 'login'
      })
    }
    

    写到最后,欢迎关注作者:http://www.techshare100.com/

    相关文章

      网友评论

        本文标题:vue router动态追加路由

        本文链接:https://www.haomeiwen.com/subject/eckyactx.html