vue按需缓存页面(vue-element-admin)

最新推荐文章于 2024-08-20 14:02:59 发布

luxiaopengyou

最新推荐文章于 2024-08-20 14:02:59 发布

阅读量4.6k

点赞数 1

分类专栏： js 文章标签： vue

本文链接：https://blog.csdn.net/luxiaopengyou/article/details/108831210

版权

本文详细介绍了在vue-element-admin中实现按需缓存页面的方法，涉及routers.js、AppMain.js、store的setting.js文件和routerindex.js文件的配置。通过设置meta信息、 vuex控制、动态增删缓存页面及全局路由守卫判断，确保页面按需缓存。注意，使用组件的$destroy方法可能不可靠，应依赖keepAlive属性进行动态控制。

摘要由CSDN通过智能技术生成

一、路由文件routers.js

1、代码

const deviceList =() => import('@/views/device-manage/');
{
   
    path: '/device',
    component: Layout,
    name: 'Device',
    code: 'device',
    redirect: 'index',
    meta: {
   
      title: '设备管理',
      keepAlive: true,
    },
    children: [
      {
   
        path: 'index',
        component: deviceList,
        name: 'DeviceList',
        code: 'deviceList',
        meta: {
   
          title: '设备管理',
          keepAlive: true,
          keepComponentPages: ['pageToKeepAlive1', 'pageToKeepAlive2'],
        },
      },

2、说明

2.1、在需要被缓存的页面里设置meta的keepAlive: true,keepComponentPages: ['pageToKeepAlive1', 'pageToKeepAlive2'],表示该页面需要被缓存；
2.2、keepComponentPages的两个值是从该页面跳转到name为pageToKeepAlive1、pageToKeepAlive2时需要被缓存，后面的程序会判断，如果该页面跳转到其他页面，则该页面将不会被缓存。