Element做管理系统时 2、3级路由切换时，界面数据不缓存问题

wuyangchun 发布于2019-08-23 14:17 / 3360人阅读

摘要：解决方案方法一适用范围，菜单列表是通过接口返回的。菜单列表不是接口返回的，接口只返回访问菜单的权限，大体意思就是统一把路由写成三级形式。我比较赞成菜单权限列表一律放在后台做这样做风险远比在前端处理的要小。

解决方案

方法一：

适用范围，菜单列表是通过接口返回的。
PS：只要通过接口返回的菜单列表就意味着用户是可以访问的，权限处理一律放在后台做，但写本地路由时不论是二级界面还是三级界面，配置路由时统一配置成二级路径，这样就可以保证它们可以在同一级别，自然而然的就不会出现题目所说的问题

方法二：

适用范围，菜单列表访问权限是在前端做的。 PS: 菜单列表不是接口返回的，接口只返回访问菜单的权限，大体意思就是统一把路由写成三级形式。

1、二级写成三级, 有人说我是二级你写成三级这样路径不就不对了嘛，这里在二级路由这地方利用path: "/test"
这样写url依然是二级路径

  {
    path: "/test",
    component: layOut,
    children: [
      {
        path: "/test",
        component: blank,  
        children: [
          {
            path: "test_page1",
            name: "test_page1",
            component: resolve =>
              require(["@/views/test/test_page1/list.vue"], resolve),
            meta: {
              label: "测试界面1",
              icon: "",
              cache: true,
              closable: true,
              routerPath: "/test/test_page1"
            }
          }
        ]
      }
    ]
  },

2、三级就照着三级的路由写

{
    path: "/test",
    component: layOut,
    children: [
      {
        path: "test_page2",
        name: "test_page2",
        component: blank,
        children: [
          {
            path: "test_page3",
            name: "test_page3",
            component: resolve =>
              require(["@/views/test_page2/test_page3/list.vue"], resolve),
            meta: {
              label: "测试界面2",
              cache: true,
              closable: true,
              routerPath: "/test/test_page2/test_page3"
            }
          }
        ]
      }
    ]
  },

3、component: blank, 这地方需要做一下缓存

测试结果

经测试上面两种写方法都可以解决二、三级路由切换时，界面数据不会缓存问题，不过具体场景要选择对应方法，但是为什么会出现这样问题，自己还没有深入了解，有时间一定要去探究其原理。
PS:我比较赞成菜单权限列表一律放在后台做, 这样做风险远比在前端处理的要小。

GPU云服务器云服务器解析jpeg数据时的问题做数据分析时标准化 ecs故障时自动切换支付时常见问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100392.html

最近遇到的前端面试题(2017.03.08更新版)

摘要：通过管理组件通信通过驱动视图比较差异进行更新操作作者第七页链接来源知乎著作权归作者所有，转载请联系作者获得授权。达到无刷新的效果。对象的状态不受外界影响。对象代表一个异步操作，有三种状态进行中已完成，又称和已失败。以下问题解释非本人原创，是根据面试经验整理后觉得更容易理解的解释版本，欢迎补充。一. 输入url后的加载过程从输入 URL 到页面加载完成的过程中都发生了什么计算机...

Nosee 2019-08-30 15:53 评论0 收藏0
最近遇到的前端面试题(2017.03.08更新版)

摘要：通过管理组件通信通过驱动视图比较差异进行更新操作作者第七页链接来源知乎著作权归作者所有，转载请联系作者获得授权。达到无刷新的效果。对象的状态不受外界影响。对象代表一个异步操作，有三种状态进行中已完成，又称和已失败。以下问题解释非本人原创，是根据面试经验整理后觉得更容易理解的解释版本，欢迎补充。一. 输入url后的加载过程从输入 URL 到页面加载完成的过程中都发生了什么计算机...

刘东 2019-08-01 16:29 评论0 收藏0
最近遇到的前端面试题(2017.03.08更新版)

摘要：通过管理组件通信通过驱动视图比较差异进行更新操作作者第七页链接来源知乎著作权归作者所有，转载请联系作者获得授权。达到无刷新的效果。对象的状态不受外界影响。对象代表一个异步操作，有三种状态进行中已完成，又称和已失败。以下问题解释非本人原创，是根据面试经验整理后觉得更容易理解的解释版本，欢迎补充。一. 输入url后的加载过程从输入 URL 到页面加载完成的过程中都发生了什么计算机...

linkFly 2019-08-21 11:35 评论0 收藏0
饿了么组件库，element-ui开发精美的后台管理系统系列之（一）开发伸缩菜单

摘要：先看这个值即为判断显示展开还是收缩状态的开关。这样就实现了展开状态下的菜单。如果有时间的话，我会把这个系列写完，知道朋友们能独立开发一个完整的的单页面后台管理程序。涉及到路由，权限等等相关内容的部分，跟本文主旨关系不大，所以我将会在另外一篇文章中详述，混在一起的话内容太多了基于element-ui的左侧可伸缩的菜单通过vuejs来开发支持展开收缩的菜单是非常简单的，只需要v-i...

whlong 2019-08-21 16:23 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0