vue2缓存页面数据==＞组件keep-alive

• 安装插件

npm i keep-alive
yarn add keep-alive

• 通过router-view的meta.keepAlive判断是否需要缓存

        <el-main>
          <breadcrumb />
          <!-- 需要缓存数据的页面 -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
          </keep-alive>
          <!-- 不需要缓存数据的页面 -->
          <router-view v-if="!$route.meta.keepAlive" />
        </el-main>

• 在对应的路由里面配置keepAlive的值

    {
      path: '/table',
      name: `${pre}_table`,
      meta: { title: '表格', keepAlive: true, },
      component: () => import('@/views/table'),
    },

• 如果页面有部分数据需要刷新（例如table数据需要实时刷新，查询条件需要缓存），就借助keep-alive的activated钩子函数（与created这些钩子平级）

  activated(){
    this.getData();//需要刷新的都放在这里
  },