vue Tab切换以及缓存页面处理的几种方式

include

有几种用法，可以是数组，字符串用标点隔开，也可以是正则，使用正则的时候需要使用

v-bind

来绑定。

<keep-alive include="['a','b']">//缓存name为a,b的组件
<keep-alive include ="a,b">//缓存name为a,b的组件
<keep-alive :include="/^store/">//缓存name以store开头的组件
  <router-view/>//可以为router-view
  <component :is="view"></component>//也可以是动态组件
</keep-alive>

使用

exclude

来排除不需要缓存的路由

跟

include

正好相反，在

exclude

里的组件不会被缓存。用法类似，不作赘述

3.2.3 一种比较奇怪的情况

当页面跳转方式有

A->C

和

B->C

两种，但是我们从A到C的时候，不需要缓存，从B到C的时候需要缓存。这时候就要用到路由的钩子结合老版本用法来实现了。

export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  to.meta.keepAlive = false; // 让下一页不缓存
  next();
 }
};

export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
  to.meta.keepAlive = true; //下一页缓存
  next();
 }
};

3.3 缓存组件的生命周期函数

缓存组件

第一次

打开的时候，和普通组件一样，也需要执行

created

,

mounted

等函数。
但是在

被再次激活

和

被停用

时，这几个普通组件的生命周期函数都不会执行，会执行两个比较独特的生命周期函数。

activated
这个会在缓存的组件重新激活时调用

deactivated
这个会在缓存的组件停用时调用

结语

这个是很基础的知识，放在笔记里很久了，不过之前记得有点乱，今天拿出来抖一下尘~