[ 思路 ]

• 游客，会员，管理员，不同身份对应的页面数量是不同的，所以再token中要对角色身份和权限进行标记
• 服务端需要对前端页面进行权限统筹，针对不同权限的用户，返回相应权限范围的页面和导航数据。
• 前端收到鱼用户权限相对应的页面和导航数据后，进行匹配渲染。
• 在导航守卫中加入资源预请求，根据请求到的页面和信息，动态的添加路由上去。

  router.beforeEach(async (to, from, next) => {
    if(to.path === '/login') {
      next()
    }else {
      // 预先请求页面数据 
      const data = await getResource(); 
      // 将数据转换成路由配置
      const dynamicRoute = createDynamicRoute(data)
      // 动态的配置路由
      router.addRoute(dynamicRoute)
    }
  })
  function createDynamicRoute(res) {
    const homeRoute = routes.filter(v => v.path === '/home')
    homeRoute.children = []
    data.forEach(item => {
      homeRoute.children.push({ 
        path: item.path,
        name: item.name,
        component: () => import(`@/views/home/content/${item.component}/index.vue`)
      })
    })
    return homeRoute
  }

[ 性能优化 ]

• 上述操作有一个问题，就是每次路由跳转都会去重复预请求页面数据，造成资源浪费
• 通过缓存处理进行性能优化
• 参考