路由的緩存

在搭建 vue 項目時，有某些組件沒必要多次渲染，所以需要將組件在內存中進行‘持久化’，此時 <keep-alive> 便可以派上用場了。 <keep-alive> 可以使被包含的組件狀態維持不變，即便是組件切換了，其內的狀態依舊維持在內存之中。在下一次顯示時，也不會重現渲染。

<router-link>和<router-view>和<keep-alive>

主要 結合 Vue Router 配置 meta  true

1.keep-alive

<!-- template -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
//router配置
new Router({
　　routes: [
　　　　{
　　　　name: 'a',
　　　　path: '/a',
　　　　component: A,
　　　　meta: {
　　　　　　keepAlive: true
　　　　}
　　},
　　{
　　　name: 'b',
     path: '/b',
     component: B
   }
  ]
})

　　

<!-- 一個include解決了，不需要多寫一個標簽，也不需要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
<router-view></router-view>
</keeo-alive>

　　

<!-- 逗號分隔字符串，只有組件a與b被緩存。這樣使用場景變得更有意義了 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正則表達式 (需要使用 v-bind，符合匹配規則的都會被緩存) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- Array (需要使用 v-bind，被包含的都會被緩存) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>

　　

<template>
  <div>
    <h1>歡迎頁</h1>
    <input type="text" name="" value=""><br>
    <router-link to="/">回到首頁</router-link>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  //keep-alive鈎子函數：組件被激活時調用
  activated() {
    console.log('歡迎頁被激活');
  },
  //keep-alive鈎子函數：組件消失，被緩存時調用
  deactivated() {
    console.log('歡迎頁被緩存');
  }
}
</script>

　　

　　activated()：頁面組件被激活時調用。即組件第一次渲染時會被調用，之后每次 keep-alive 激活時也會被調用。通常我們可以在這個方法中實現：每次進入頁面的時候獲取最新的數據。

　　只有組件被 keep-alive 包裹時，這兩個函數才會被調用。如果作為正常組件使用，是不會被調用的。

 

在關於頁（about.vue）路由離開  這個鈎子函數中設置首頁不緩存：

<template>
  <div>
    <h1>關於頁</h1>
    <input type="text" name="" value=""><br>
    <router-link to="/">回到首頁</router-link>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  //keep-alive鈎子函數：組件被激活時調用
  activated() {
    console.log('首頁被激活');
  },
  //keep-alive鈎子函數：組件消失，被緩存時調用
  deactivated() {
    console.log('首頁被緩存');
  },
  beforeRouteLeave(to, from, next) {
    //設置下一個路由的meta（即首頁）
    to.meta.keepAlive = false;  //讓首頁不緩存，即刷新
    //to.meta.keepAlive = true;  //讓首頁緩存，即不刷新
    next();
  }
}
</script>

　　

　　

原文出自：www.hangge.com  轉載請保留原文鏈接：https://www.hangge.com/blog/cache/detail_2132.html

 

 

參考： https://blog.csdn.net/seanxwq/article/details/79164565

          https://www.hangge.com/blog/cache/detail_2132.html