Vue3-KeepAlive,多個頁面使用keepalive方式
Vue3-KeepAlive,多個頁面使用keepalive
Vue3的生命周期
未添加keepAlive的生命周期
beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeUnmount=>unmounted
添加keepAlive的生命周期
activated：當keepalive包含的組件渲染的時候觸發(fā)deactived：當keepalive包含的組件銷毀的時候觸發(fā)keep-alive的生命周期activated： 頁面第一次進入的時候，鉤子觸發(fā)的順序是created->mounted->activateddeactivated: 頁面退出的時候會觸發(fā)deactivated
當再次前進或者后退的時候只觸發(fā)activated
在VueApp中配合vue-router使用keepalive
上一節(jié)了解到keepalive的生命周期后，大致就可以理解keepalive的意義，用于緩存頁面信息，不重復渲染同樣的內(nèi)容。
可配合vue-router路由使用keepalive，在路由組件配置文件當中配置組件是否需要被緩存
配置meta屬性，以Home組件為例,配置meta.keepAlive為true
{//主頁
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue'),
meta: {
title: 'Home',
keepAlive: true
},
beforeRouteLeave: (to, from, next) => {
console.log(to.meta);
}
}
在根組件App.vue中使用keep-alive標簽包含需要緩存的組件，這里根據(jù)$router.meta.keepAlive屬性判斷是否緩存
<!-- 這是vue3的寫法，與vue2的寫法有所區(qū)別，如果這里使用vue2.x寫法，會有警告 -->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
</keep-alive>
<component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
</router-view>
請注意上述代碼當中有:key屬性，通常多個頁面會使用到keepAlive屬性，如果是多個頁面，那么必須加上:key屬性，否則會報錯。
效果圖（首頁及mv頁不會重新加載）
Vue2和Vue3的keep-alive用法
vue3的keep-alive用法和vue2用法是不同的。
vue2 keep-alive
keep-alive概念：
keep-alive是Vue的內(nèi)置組件，當它包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀。
keep-alive作用：
用來緩存組件，避免多次加載相同的組件，減少性能消耗，提高用戶體驗。
keep-alive使用方式:
方式一：在App.vue中使用keep-alive標簽，表示緩存所有頁面
<div id="app">
<keep-alive>
<tar-bar></tar-bar>
<div class="container">
<left-menu></left-menu>
<Main />
</div>
</keep-alive>
</div>
方式二：按條件緩存，使用include，exclude判斷是否緩存
// 1. 將緩存 name 為 cc 的組件,如果有多個，可用逗號分
<keep-alive include='cc，cc1,cc2'>
<router-view/>
</keep-alive>
// 2. 將不緩存 name 為 cc 的組件
<keep-alive exclude='cc'>
<router-view/>
</keep-alive>
// 3. 還可使用屬性綁定動態(tài)判斷
<keep-alive :include='includedComs'>
<router-view/>
</keep-alive>
方式三：在router目錄下的index.js中，
第一步：使用meta:{keepAlive = true },表示需要緩存
const routes = [
{
path:'/',
component:Home,
meta:{
keepalive:true
}
},
{
path:'/login',
component:Login
},
{
path:'/edit',
component:Edit,
meta:{
istoken: true
}
},
{
path:'/home',
component:Home,
meta:{
keepalive:true
}
}
]
第二步：在App.vue中進行判斷
<div id="app">
<!--keep-alive 表示頁面不會被銷毀，即保持頁面狀態(tài)-->
<keep-alive>
<router-view v-if="$route.meta.keepalive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepalive"></router-view>
</div>
vue3中 keep-alive
1基本用法（通過插槽）
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"/>
</keep-alive>
</router-view>
2條件緩存（通過插槽的方式）
示例：列表頁面跳轉(zhuǎn)到詳情頁面的情況，保證上一級頁面的頁面數(shù)據(jù)不會刷新，例如兩個頁面A頁面—>>>列表頁，B頁面—>>>詳情頁，A–>>B–>>A ，緩存A頁面的數(shù)據(jù)
<template>
<router-view v-slot="{ Component }">
<keep-alive :include="includeList">
<component :is="Component"/>
</keep-alive>
</router-view>
</template>
<script>
import { reactive, watch, toRefs } from '@vue/runtime-core'
import { useRoute, useRouter }
export default {
name: 'Test',
setup(){
const state = reactive({
includeList: []
})
const route = useRoute()
// const router = useRouter()
watch(() => route,(newVal,oldVal)=>{
if(newVal.meta.keepAlive && state.includeList.indexOf(newVal.name) === -1){
state.includeList.push(newVal.name);
console.log(state.includeList);
}
},{deep:true}) // 開啟深度監(jiān)聽
return{
...toRefs(state)
}
}
}
</script>
路由頁面的配置
{
path: 'test',
name: 'Test',
component: () => import('@/views/Test'),
meta: {
keepAlive: true, // 組件需要緩存
}
},
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue中input標簽上傳本地文件或圖片后獲取完整路徑的解決方法
本文給大家介紹vue中input標簽上傳本地文件或圖片后獲取完整路徑，如E:\medicineOfCH\stageImage\xxx.jpg，本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2023-04-04
在當今前端開發(fā)的領域中,Vue 框架因其高效和靈活的特性備受開發(fā)者青睞,而 Vant 是一個輕量的移動端組件庫,為 Vue 應用的開發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過 Vant 來實現(xiàn)日期選擇器的使用,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue請求函數(shù)和路由的安裝使用過程,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了8個非常實用的Vue自定義指令，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Electron也可以快速地將你的網(wǎng)站打包成一個原生應用發(fā)布,下面這篇文章主要給大家介紹了關于Vue和React中快速使用Electron的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇Vue3開發(fā)文檔，包含了 Vue3 開發(fā)中使用的所有語法，文中的示例代碼講解詳細，希望所有像他一樣還不熟的伙伴快速上手 Vue3，不會的再不看要遭老罪咯2023-04-04
這篇文章主要介紹了nuxt.js 緩存實踐，nuxt 的緩存可以分為 組件級別緩存 , API級別緩存 以及 頁面級別緩存，本文就詳細的介紹了這三種緩存，感興趣的小伙伴們可以參考一下2018-06-06
VUE項目實現(xiàn)全屏顯示功能之screenfull用法
這篇文章主要介紹了VUE項目實現(xiàn)全屏顯示功能之screenfull用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當前遍歷到的節(jié)點是一個元素還是一個文本，隨著思路的展開我們就來實現(xiàn)這個功能，需要的朋友可以參考下2023-10-10
這篇文章主要介紹了配置一個vue3.0項目的完整步驟，從0開始配置一個vue項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04