zoukankan      html  css  js  c++  java
  • vue-router动态路由

    被这个动态路由折磨了三天,记录下经验:

    一、路由:

      路由分两块,一是公共页面,如登录页、不需要登录、不需要权限就能访问的页面。另一部分是后台动态返回的权限列表。

      因此,路由分为了默认路由权限路由两部分:
      默认路由:登录页。
      权限路由:其他所有需要控制权限的路由。

    二、登录:

      1、登录获取登录状态、用户信息、后端返回的权限列表
      2、本地localstorage缓存数据,为用户刷新页面保存数据。
      3、进行页面跳转(跳到home页)。

    三、入口main.js配置:

      1、在route.beforeEach中,判断用户是否登录,已登录next(),未登录跳到登录页。
      2、有些页面可能只有管理员或特殊级别人员看到,可以辅助role进行判断。router的meta里可以携带要求的角色权限信息。
      3、处理刷新的情况:如果页面刷新,因为store里的数据完全丢失,本地localstorage恢复数据。

    四、配置路由:

      很多人把配置路由放在了route.beforeEach中,在这里判断用户是否已经加载路由,我也用了这个方法,但折腾了好久都没成功。最后换了个思路。

      1、store里用routesAdded字段表示路由是否已经动态加载。
      2、默认routesAdded值为false,登录成功缓存数据时缓存的的值也是false。
      3、由于不管是刷新页面还是vue router push,App都会created,所以动态配置路由的工作放到了App的created里了。
      4、如果store里routesAdded为false,配置动态路由。

    五、动态路由:

      1、递归过滤处理后台返回的权限列表,跟本地所有的权限路由进行比对过滤,生成一份需要动态加载的动态路由。
      2、设置动态路由的默认跳转,如果路由有children就自动跳转到chidren的第一个路由,以此类推。
      3、通过router.addRoutes动态添加路由。
      4、动态路由加载完成后,将routesAdded设置为true,这样如果不刷新页面的话,就不用再次配置动态路由了。

      

  • 相关阅读:
    画笔
    进程和线程<二>
    进程和线程<一>
    文件<2>
    文件<1>
    窗口(3)
    窗口<二>
    窗口(1)
    消息
    位图
  • 原文地址:https://www.cnblogs.com/newh5/p/9806009.html
Copyright © 2011-2022 走看看