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

一、路由文件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时需要被缓存，后面的程序会判断，如果该页面跳转到其他页面，则该页面将不会被缓存。

二、AppMain.js

1、代码