vue keep-alive保存路由狀態1 （接下篇）

本文很長，但是很詳細，請耐心看完就一目了然了有下篇

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的方法，在介紹自己的方法。

 

因本文太長請看下篇高級用法