目錄

• 一、前言
• 二、使用
• 1.2和vue3的不同
  
• 2.頁面某些資料不需要快取
  
• 3.動態設定keepAlive屬性
  
• 4.使用include，exclude配置需要快取的元件
• 5.部分頁面過來需要快取，部分頁面過來需要重新整理
  
• 6.快取只在一級路由生效
  
• 總結

一、前言

當使用路由跳轉到其他頁面的時候，要求快取當前頁面，比如列表頁面跳轉到詳情頁面，需要快取列表內容，並且儲存滾動條位置，也有時候需要快取的頁面裡面有部分內容不快取，總之各種情況，下面就列舉其中一些例子

vue2和vue3的使用方式是不一樣的

created()方法和mounted()方法在頁面初始化的時候會執行，如果快取了頁面，這兩個方法都不會再執行，還有如果快取了頁面，vue2中的destroyed()和vue3中的unmounted()方法都不會執行

activated()方法在每次進入頁面都會執行

二、使用

1.vue2和vue3的不同

vue2：

<template>
	<div id="nav">
	    <router-link to="/">Home</router-link> |
	    <router-link to="/about">About</router-link>
  	</div>
	<!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
&www.cppcns.com
 
lt;/template>

vue3：

<template>
	<div id="nav">
	    <router-link to="/">Home</router-link> |
	    <router-link to="/about">About</router-link>
  	</div>
  <!-- vue3.0配置 Component是固定寫法-->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

route.中配置：

path: '/',name: 'Home',component: Home,meta:{
  keepAlive: true
}

效果：

2.頁面某些資料不需要快取

可以在activated()方法中處理需要部分重新整理的邏輯

...
需要部分重新整理的資料：<input type="text" v-model="newStr" />
...
data() {
  return {
    newStr: "2",};
},mounted() {
  console.log("執行了mounted方法");
  this.newStr = "3";
},activated() {
  console.log("執行了actived方法。。。");
  this.newStr = "4";
}

效果：

3.動態設定keepAlive屬性

也可以在vue檔案中設定keepAlive屬性，實測只有在beforeRouteEnter()方法中新增才會生效，即進入頁面的時候
在Home.vue中新增：

  // 使用元件內守衛，對離開頁面事件做一些操作
  // to為即將跳轉的路由，from為上一個頁面路由
  beforeRouteEnter(to,from,next) {
    to.meta.keepAlive = true;
    // 路由繼續跳轉
    next();
  }

4.使用include，exclude配置需要快取的元件

在app.vue中配置：

<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive>
</router-view>

其中，testKA對應某個元件的name：

export default {
    name:'testKA',// keep-alive中include屬性匹配元件name
  客棧  data() {return {}},activated() {
        // keepalive快取的頁面每次進入都會進行的生命週期
    },}

此外，include用法還有如下：

<!-- 逗號分隔字串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正則表示式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 陣列 (使用 `v-bind`) -->
<keep-alive :include="['a','b']">
  <component :is="view"></component>
</keep-alive>

exclude用法與include用法相同，代表http://www.cppcns.com不被快取的元件。

5.部分頁面過來需要快取，部分頁面過來需要重新整理

描述：如有a,b,c三個頁面，a->b時，b重新整理頁面，然後b->c,c->b時，b不重新整理頁面，再b->a,a->b時，b重新整理頁面。
自測，只有配合vuex才能實現，但是缺點是，頁面快取的時候不執行activated()方法

6.快取只在一級路由生效

如果需要在二級路由使用快取，可以在一級路由中進行同樣的配置

store.js程式碼：

state: {
  keepAlives:[]
},mutations: {
  SET_KEEP_ALIVE(state,params) {
    state.keepAlives = params
  }
},getters:{
  keepAlive:function(state){
    return state.keepAlives
  }
}

App.vue程式碼：

<template>
  <div id="nav">
    <router-link to="/bbb">BBB</router-link> |
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive :include="keepAlive">
      <component :is="Component"/>
    </keep-alive>
  </router-view>
</template>
<script>
  export default{
    computed:{
      keepAlive(){
        return this.$store.getters.keepAlive
      }
    }
  }
</script>

Home.vue程式碼：

// 使用元件內守衛，對離開頁面事件做一些操作
// to為即將跳轉的路由，from為上一個頁面路由
beforeRouteEnter(to,next) {
  next(vm=>{
    if(from.path == "/bbb"){
      vm.$store.commit("SET_KEEP_ALIVE",["Home"])
    }
  });
},beforeRouteLeave(to,next) {
  if (to.path == "/about") {
    console.log("將要跳轉/about頁面...")
  } else {
    console.log("將要跳轉非/about頁面...")
    this.$store.commit("SET_KEEP_ALIVE",[])
  }
  // 路由繼續跳轉
  next();
}

效果：

總結

到此這篇關於vue3快取頁面keep-alive及路由統一處理的文章就介紹到這了,更多相關vue3快取頁面keep-alive內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！