vue keep-alive保存路由状态1 （接下篇）

Posted 2021-01-14 wangmaoling

本文很长，但是很详细，请耐心看完就一目了然了有下篇

keep-alive 是 Vue 内置的一个组件，使被包含的组件保留状态，或避免重新渲染。

1. 基础用法，缓存所有路由：

<keep-alive>
　　<router-view>
　　　　<!-- 这里是会被缓存所有的视图组件 -->
　　</router-view>
</keep-alive>

如果想要单一缓存一个怎么办呢？看下面

 

2. 初级用法，缓存指定路由：

　　　　vue 2.1.0后提供了include/exclude两个属性: 下图为官方用法：

　　　　　　include - 字符串或正则表达，只有匹配的组件会被缓存

　　　　　　exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

　　　　　

// 组件 a
export default {
  name: ‘a‘,//先定义好组件名字 才能被缓存
  data () {
    return {}
  }
}
<keep-alive include="a,b">
  <router-view>
    <!-- name 为 a以及b 的组件将被缓存！ -->
  </router-view>
</keep-alive>

<keep-alive exclude="a">
  <router-view>
    <!-- 除了 name 为 a 的组件都将被缓存！ -->
  </router-view>
</keep-alive>

 

3. 进阶用法，结合vue-router 缓存指定路由：这里包含两个用法方式,也可以一块用，看个人习惯了，我偏向用 路由meta控制

方式1：路由表meta + 公共main组件判断

//修改1.在路由表js  增加 router.meta 属性
// routes 配置
export default [
  {
    path: ‘/home‘,
    name: ‘home‘,
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: ‘/edit,
    name: ‘edit‘,
    component: Edit,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]
//修改2.在公共main组件修改 下面是组件里的代码
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里加载会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里加载不被缓存的视图组件，比如 Edit！ -->
</router-view>
//修改3.在

方式2：路由表meta + 组件内设置name属性

//修改1.在路由表js  增加 router.meta 属性
    // routes 配置
    export default [
    {
        path: ‘/home‘,
        name: ‘home‘,
        component: Home,
        meta: {
        keepAlive: true // 需要被缓存
        }
    }, {
        path: ‘/edit,
        name: ‘edit‘,
        component: Edit,
        meta: {
        keepAlive: false // 不需要被缓存
        }
    }
    ]
//修改2.在要缓存的组件 设置那么属性
　　// 组件 a
　　export default {
  　　name: ‘home‘,//先定义好组件名字 才能被缓存

  　　data () {
    　　return {}
  　　}
　　}

4.高级用法，指定从什么组件进入才缓存，以及销毁缓存：先介绍我发现的网上一些博主写的有bug的方法，在介绍自己的方法。

 

因本文太长请看下篇高级用法