Vue3 router-view keep-alive

  • 從一個頁面跳轉另個頁面,再返回,第一個頁面會重新渲染,如何能不渲染呢?也就用到了keep-alive。

Vue3 用法

  • keep-alive屬性“include,exclude”的使用

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

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

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

  • 例子如下:name為playView的界面,router.push() 新界面時,它不會被 unmount掉;從新界面history.back()也不會重新渲染,不會執(zhí)行setup()

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

Vue2 用法

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

官方地址

https://router.vuejs.org/zh/guide/migration/index.html#router-view-%E3%80%81-keep-alive-%E5%92%8C-transition

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容