vue keepAlive保持当前状态

大家在做后台管理系统时候，编辑、详情等页面有时候需要通过路由跳转显示（没有通过子组件显示），这里有的页面需要保存当前状态，有的则不需要

需要保持状态的：数据分页查询，点击详情时，返回需要跳到当前页

不需要保持状态的：更新数据，编辑数据，删除数据（对数据进行操作的时候）

我这里是看别人的写法，我这里直接上干货（详细版本的翻到最下面有原文地址）

1.

router.js

{
          path: '/index/table', // 测试用例 组件保持当前状态 国际化时 测试用例
          name: 'table',
          component: resolve => require(['@/views/table/table'], resolve),
          meta: {
            child: false,
            hidden: false,
            icon: 'el-icon-tickets',
            localekey: 'table',
            keepAlive: true
          }
        },

将当前需要保持状态的路由设置meta:{keepAlive:true}

2.

index.vue

<template>
<el-container class="container">
  <Aside />
  <el-container class="inner-container">
    <Header />
    <el-main class="main">
      <!--保持当前状态 但防止编辑 注册 等返回时，数据未刷新（在本项目中日历会被一直保持）  需要在路由标识 是否 保持当前状态 并判断-->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" />
    </el-main>
    <el-footer class="footer">{{$t('message.footer')}}</el-footer>
  </el-container>
</el-container>
</template>

通过当前路由meta:{keepAlive:true}判断,保持状态的添加<keep-alive></keep-alive>

原文地址：https://zhuanlan.zhihu.com/p/54822855

预览效果：https://github.com/iswtt/vue-cli4.0-init.git