vue组件缓存 keep-alive

vue组件缓存 keep-alive

1.使用官方给出的属性
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

home组件

<template>
  <div class="home">
    <input type="text">
  </div>
</template>
<script>
export default {
  name: 'home',
}
</script>

about组件

<template>
  <div class="about">
    <input type="text">
  </div>
</template>
<script>
export default {
  name:'about'
}
</script>

app组件

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>

    <!-- 只有name为home的组件会被缓存 -->
    <!-- <keep-alive include="home">
      <router-view/>
    </keep-alive> -->

    <!-- name为home的组件不会被缓存 -->
    <keep-alive exclude="home">  
      <router-view/>
    </keep-alive>
  </div>
</template>

注意：
keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称
当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高，比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。

2.在路由中使用meta属性

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue'),
    meta:{
      keepAlive: true // 需要被缓存
    }
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta:{
      keepAlive: false // 不需要被缓存
    }
  }
]

const router = new VueRouter({
  routes
})

export default router

app.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    
    <!-- 这里是需要被缓存的试图组件 比如home-->
    <keep-alive >
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>

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