// 組件
export default {
 name: 'test-keep-alive',
 data () {
 return {
  includedComponents: "test-keep-alive"
 }
 }
}

<keep-alive include="test-keep-alive">
 <!-- 將緩存name為test-keep-alive的組件 -->
 <component></component>
</keep-alive>

<keep-alive include="a,b">
 <!-- 將緩存name為a或者b的組件，結(jié)合動態(tài)組件使用 -->
 <component :is="view"></component>
</keep-alive>

<!-- 使用正則表達(dá)式，需使用v-bind -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

<!-- 動態(tài)判斷 -->
<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
 <!-- 將不緩存name為test-keep-alive的組件 -->
 <component></component>
</keep-alive>

<keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

//...router.js
export default new Router({
 routes: [
 {
  path: '/',
  name: 'Hello',
  component: Hello,
  meta: {
  keepAlive: false // 不需要緩存
  }
 },
 {
  path: '/page1',
  name: 'Page1',
  component: Page1,
  meta: {
  keepAlive: true // 需要被緩存
  }
 }
 ]
})

<!-- Page1頁面 -->
<template>
 <div class="hello">
 <h1>Vue</h1>
 <h2>{{msg}}</h2>
 <input placeholder="輸入框"></input>
 </div>
</template>

<!-- Hello頁面 -->
<template>
 <div class="hello">
 <h1>{{msg}}</h1>
 </div>
</template>

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

export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
   // 設(shè)置下一個路由的 meta
  to.meta.keepAlive = true; // B 跳轉(zhuǎn)到 A 時，讓 A 緩存，即不刷新
  next();
 }
};

export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 設(shè)置下一個路由的 meta
  to.meta.keepAlive = false; // C 跳轉(zhuǎn)到 A 時讓 A 不緩存，即刷新
  next();
 }
};