vue3中keep-alive和vue-router的結合使用方式

更新時間：2022年10月19日 11:30:03 作者：大橘為重¨

這篇文章主要介紹了vue3中keep-alive和vue-router的結合使用方式，?具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

keep-alive：Vue內置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。
router-view：vue-router內置組件，如果直接包含在keep-alive里面，所有路徑匹配到的組件都會被緩存。

提示：以下是本篇文章正文內容，下面案例可供參考

代碼

Hmoe組件：

<template>
  <div class="home">
    <input type="text" name="" id="">
  </div>
</template>
<script>
export default {
  name: 'Home',
  components: {},
  created() {
    console.log('Home被創(chuàng)建');
  },
  unmounted() {
    console.log('Home被銷毀');
  }
}
</script>

About組件：

<template>
  <div class="about">
    <input type="text">
  </div>
</template>
<script>
export default {
  name: 'About',
  components: {},
  created() {
    console.log('About被創(chuàng)建');
  },
  unmounted() {
    console.log('About被銷毀');
  }
}
</script>

路由代碼：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

一、為何要使用keep-alive？

當路由切換時想要達到頁面不重新緩存，避免組件被銷毀時即可使用keep-alive來實現(xiàn)。

例如：

此時切換到“About”組件后“Home”逐漸將會被銷毀，

再切換回“Home”組件時輸入框內信息已經被重新渲染消去。

為避免組件重新渲染所以使用“keep-alive”。

二、vue2中使用keep-alive

將“router-view”組件包含于“keep-alive”即可

<keep-alive>
      <router-view />
</keep-alive>

此時組件將保留狀態(tài)，或避免重新渲染。

三、vue3中使用keep-alive

vue3的keep-alive應用相對于vue2有所變化，此處描述vue3時如何使用，詳情可見：Vue Router文檔

使

<keep-alive>
      <router-view />
</keep-alive>

改變?yōu)槿缦麓a，

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

即可。

四、keep-alive屬性“include，exclude”的使用

注意：使用include，exclude 屬性需要給所有vue類的name賦值，否則 include，exclude將不生效

include 值為字符串或者正則表達式匹配的組件name不會被銷毀。
exclude 值為字符串或正則表達式匹配的組件name會被銷毀。

如，修改路由代碼為：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view v-slot="{ Component }">
    <transition>
    //About組件將會被銷毀，而Home組件則不會
      <keep-alive exclude="About">             
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

例如：

進入頁面