页签切换不刷新页面

问题

在使用elementUI时，顶部的标签页切换都会对页面进行刷新，这样页面内部的页码、页面大小等一系列状态就会被重新加载，无法保留原来的状态

一般都会邮箱想到使用Vuex来保存状态，但是保留像页码、页面大小这样不太重要的状态，外加上每个页面都加，使用Vuex写起来就会显得非常的繁琐

所以，在不太在意性能的情况下，保持不太重要的状态，我们可以使用包裹我们的页面组件，使其编写起来更加轻松

原理

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated

所以可以对只加载一次且需要保留状态的操作放在created和mounted中，而需要频繁更新（包括页签切换就更新，比如：任务的执行状态）的放在activated中

操作

<keep-alive>
  <router-view :key="key" />
</keep-alive>

注意页面组件的name要和路由的name一致

// 路由的name
export default{
	name: 'targetPage',
	components: {...}
}
 
// 页面组件的name
{
	name:'targetPage',
	data(){...},
	methods:{...}
}