vue的使用之 keep-alive的用法

转发：https://blog.csdn.net/qq_33505829/article/details/98847457

1. 需求： 回退页面不刷新，保持原样，数据缓存。

2. 做法：使用vue 的keep-alive ,保持组件的数据缓存，避免被重新渲染。

3. keep-alive的用法：

<keep-alive include="viewer">
  <router-view></router-view></keep-alive>

keep-alive的两个props ，inclue (包含那些name的组件)和exclude (不包含那些name的组件)， 可以是字符串，也可以是正则表达式。

name 的命名可以在组件内部：

// 组件 viewerexport default {
 name: 'viewer',
 data () {
   return {}
 }}

这样就被缓存了。如果不写include或者exclude 那些，所有的组件都会被缓存 。

4.继续深入使用：

项目比较复杂的时候，组件不可能命名 ，好多，找着也不方便。所以，有另外的写法，参考如下 ：

利用 v-router的meta属性，在配置路由的时候，配置keepAlive的属性值。

// routes 配置export default [
 {
   path: '/',
   name: 'home',
   component: Home,
   meta: {
     keepAlive: true // 需要被缓存
   }
 }, {
   path: '/edit',
   name: 'edit',
   component: Edit,
   meta: {
     keepAlive: false // 不需要被缓存
   }
 }]

然后在组件引入的时候这样写 ：

<keep-alive>
   <router-view v-if="$route.meta.keepAlive">
       <!-- 这里是会被缓存的视图组件，比如 Home！ -->
   </router-view></keep-alive><router-view v-if="!$route.meta.keepAlive">
   <!-- 这里是不被缓存的视图组件，比如 Edit！ --></router-view>

1. 继续深入 ，如果有 abc 三个组件，a到b 组件不刷新，c到b刷新，那配置b组件的meta 就不能写死了 。何解？

可以利用v-router的beforeRouteLeave属性：

在b组件 ：

{
       path: '/',
       name: 'b',
       component: b,
       meta: {
           keepAlive: true // 需要被缓存       }}

a 到 b是不刷新的，即被缓存，keepAlive = true; c 组件到b 组件刷新，即不被缓存，keepAlive = false;

// a组件export default {
      data() {
          return {};
      },
      methods: {},
      beforeRouteLeave(to, from, next) {
           // 设置下一个路由的 meta
          to.meta.keepAlive = true;  // 让 b 缓存，即不刷新
          next();
      }};// c 组件export default {
      data() {
          return {};
      },
      methods: {},
      beforeRouteLeave(to, from, next) {
           // 设置下一个路由的 meta
          to.meta.keepAlive = false;  // 让 a 不缓存，即刷新
          next();
      }};

好了 ，keepAlive 的用法，你学会了吗？
————————————————
版权声明：本文为CSDN博主「杰森精灵」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_33505829/article/details/98847457