如何理解vue3緩存頁(yè)面keep-alive及路由統(tǒng)一處理

這篇文章給大家介紹如何理解vue3緩存頁(yè)面keep-alive及路由統(tǒng)一處理，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

一、前言

當(dāng)使用路由跳轉(zhuǎn)到其他頁(yè)面的時(shí)候，要求緩存當(dāng)前頁(yè)面，比如列表頁(yè)面跳轉(zhuǎn)到詳情頁(yè)面，需要緩存列表內(nèi)容，并且保存滾動(dòng)條位置，也有時(shí)候需要緩存的頁(yè)面里面有部分內(nèi)容不緩存，總之各種情況，下面就列舉其中一些例子

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

created()方法和mounted()方法在頁(yè)面初始化的時(shí)候會(huì)執(zhí)行，如果緩存了頁(yè)面，這兩個(gè)方法都不會(huì)再執(zhí)行，還有如果緩存了頁(yè)面，vue2中的destroyed()和vue3中的unmounted()方法都不會(huì)執(zhí)行

activated()方法在每次進(jìn)入頁(yè)面都會(huì)執(zhí)行

二、使用

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"/>
</template>

vue3：

<template>
	<div id="nav">
	    <router-link to="/">Home</router-link> |
	    <router-link to="/about">About</router-link>
  	</div>
  <!-- vue3.0配置 Component是固定寫(xiě)法-->
  <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.js中配置：

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

效果：

2.頁(yè)面某些數(shù)據(jù)不需要緩存

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

...
需要部分刷新的數(shù)據(jù)：<input type="text" v-model="newStr" />
...
data() {
  return {
    newStr: "2",
  };
},
mounted() {
  console.log("執(zhí)行了mounted方法");
  this.newStr = "3";
},
activated() {
  console.log("執(zhí)行了actived方法。。。");
  this.newStr = "4";
}

效果：

3.動(dòng)態(tài)設(shè)置keepAlive屬性

也可以在vue文件中設(shè)置keepAlive屬性，實(shí)測(cè)只有在beforeRouteEnter()方法中添加才會(huì)生效，即進(jìn)入頁(yè)面的時(shí)候
在Home.vue中添加：

  // 使用組件內(nèi)守衛(wèi)，對(duì)離開(kāi)頁(yè)面事件做一些操作
  // to為即將跳轉(zhuǎn)的路由，from為上一個(gè)頁(yè)面路由
  beforeRouteEnter(to, from, next) {
    to.meta.keepAlive = true;
    // 路由繼續(xù)跳轉(zhuǎn)
    next();
  }

4.使用include，exclude配置需要緩存的組件

在app.vue中配置：

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

其中，testKA對(duì)應(yīng)某個(gè)組件的name：

export default {
    name:'testKA',// keep-alive中include屬性匹配組件name
    data() {return {}},
    activated() {
        // keepalive緩存的頁(yè)面每次進(jìn)入都會(huì)進(jìn)行的生命周期
    },
}

此外，include用法還有如下：

<!-- 逗號(hào)分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

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

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

exclude用法與include用法相同，代表不被緩存的組件。

5.部分頁(yè)面過(guò)來(lái)需要緩存，部分頁(yè)面過(guò)來(lái)需要刷新

描述：如有a,b,c三個(gè)頁(yè)面，a->b時(shí)，b刷新頁(yè)面，然后b->c,c->b時(shí)，b不刷新頁(yè)面，再b->a,a->b時(shí)，b刷新頁(yè)面。
自測(cè)，只有配合vuex才能實(shí)現(xiàn)，但是缺點(diǎn)是，頁(yè)面緩存的時(shí)候不執(zhí)行activated()方法

6.緩存只在一級(jí)路由生效

如果需要在二級(jí)路由使用緩存，可以在一級(jí)路由中進(jìn)行同樣的配置

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代碼：

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

效果：

關(guān)于如何理解vue3緩存頁(yè)面keep-alive及路由統(tǒng)一處理就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。