這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
為了讓頁面保活更加穩定，你們是怎么做的？
我用一行配置實作了
Vue頁面保活是指在用戶離開當前頁面后，可以在回傳時恢復上一次瀏覽頁面的狀態，這種技術可以讓用戶享受更加流暢自然的瀏覽體驗，而不會被繁瑣的操作打擾，
為什么需要頁面保活？
頁面保活可以提高用戶的體驗感，例如，當用戶從一個帶有分頁的表格頁面（【頁面A】）跳轉到資料詳情頁面（【頁面B】），并查看了資料之后，當用戶從【頁面B】回傳【頁面A】時，如果沒有頁面保活，【頁面A】會重新加載并跳轉到第一頁，這會讓用戶感到非常煩惱，因為他們需要重新選擇頁面和資料，因此，使用頁面保活技術，當用戶回傳【頁面A】時，可以恢復之前選擇的頁碼和資料，讓用戶的體驗更加流暢，
如何實作頁面保活？
狀態存盤
這個方案最為直觀，原理就是在離開【頁面A】之前手動將需要保活的狀態存盤起來，可以將狀態存盤到LocalStore、SessionStore或IndexedDB，在【頁面A】組件的onMounted鉤子中，檢測是否存在此前的狀態，如果存在從外部存盤中將狀態恢復回來，
有什么問題？
- 浪費心智（麻煩/操心），這個方案存在的問題就是，需要在撰寫組件的時候就明確的知道跳轉到某些頁面時進行狀態存盤，
- 無法解決子組件狀態，在頁面組件中還可以做到保存頁面組件的狀態，但是如何保存子組件呢，不可能所有的子組件狀態都在頁面組件中維護，因為這樣的結構并不是合理，
組件快取
利用Vue的內置組件<KeepAlive/>快取包裹在其中的動態切換組件（也就是<Component/>組件），<KeepAlive/>包裹動態組件時，會快取不活躍的組件，而不是銷毀它們，當一個組件在<KeepAlive/>中被切換時，activated和deactivated生命周期鉤子會替換mounted和unmounted鉤子，最關鍵的是，<KeepAlive/>不僅適用于被包裹組件的根節點，也適用于其子孫節點，
<KeepAlive/>搭配vue-router即可實作頁面的保活，實作代碼如下：
<template>
<RouterView v-slot="{ Component }">
<KeepAlive>
<component :is="Component"/>
</KeepAlive>
</RouterView>
</template>
有什么問題？
- 頁面保活不準確，上面的方式雖然實作了頁面保活，但是并不能滿足生產要求，例如：【頁面A】是應用首頁，【頁面B】是資料串列頁，【頁面C】是資料詳情頁，用戶查看資料詳情的動線是：【頁面A】->【頁面B】->【頁面C】，在這條動線中【頁面B】->【頁面C】的時候需要快取【頁面B】，當從【頁面C】->【頁面B】的時候需要從換從中恢復【頁面B】，但是【頁面B】->【頁面A】的時候又不需要快取【頁面B】，上面的這個方法并不能做到這樣的配置，
最佳實踐
最理想的保活方式是，不入侵組件代碼的情況下，通過簡單的配置實作按需的頁面保活，
【不入侵組件代碼】這條即可排除第一種方式的實作，第二種【組件快取】的方式只是敗在了【按需的頁面保活】，那么改造第二種方式，通過在router的路由配置上進行按需保活的配置，再提供一種讀取配置結合<KeepAlive/>的include屬性即可，
路由配置
src/router/index.ts
import useRoutersStore from '@/store/routers';
const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'index',
component: () => import('@/layout/index.vue'),
children: [
{
path: '/app',
name: 'App',
component: () => import('@/views/app/index.vue'),
},
{
path: '/data-list',
name: 'DataList',
component: () => import('@/views/data-list/index.vue'),
meta: {
// 離開【/data-list】前往【/data-detail】時快取【/data-list】
leaveCaches: ['/data-detail'],
}
},
{
path: '/data-detail',
name: 'DataDetail',
component: () => import('@/views/data-detail/index.vue'),
}
]
}
];
router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
const { cacheRouter } = useRoutersStore();
cacheRouter(from, to);
next();
});
保活組件存盤
src/stroe/router.ts
import { RouteLocationNormalized } from 'vue-router';
const useRouterStore = defineStore('router', {
state: () => ({
cacheComps: new Set<string>(),
}),
actions: {
cacheRouter(from: RouteLocationNormalized, to: RouteLocationNormalized) {
if(
Array.isArray(from.meta.leaveCaches) &&
from.meta.leaveCaches.inclued(to.path) &&
typeof from.name === 'string'
) {
this.cacheComps.add(form.name);
}
if(
Array.isArray(to.meta.leaveCaches) &&
!to.meta.leaveCaches.inclued(from.path) &&
typeof to.name === 'string'
) {
this.cacheComps.delete(to.name);
}
},
},
getters: {
keepAliveComps(state: State) {
return [...state.cacheComps];
},
},
});
頁面快取
src/layout/index.vue
<template>
<RouterView v-slot="{ Component }">
<KeepAlive :include="keepAliveComps">
<component :is="Component"/>
</KeepAlive>
</RouterView>
</template>
<script lang='ts' setup>
import { storeToRefs } from 'pinia';
import useRouterStore from '@/store/router';
const { keepAliveComps } = storeToRefs(useRouterStore());
</script>
TypeScript提升配置體驗
import 'vue-router';
export type LeaveCaches = string[];
declare module 'vue-router' {
interface RouteMeta {
leaveCaches?: LeaveCaches;
}
}
該方案的問題
- 缺少通配符處理
/*、/**/index， - 無法快取
/preview/:address這樣的動態路由， - 組件名和路由名稱必須保持一致，
總結
通過<RouterView v-slot="{ Component }">獲取到當前路由對應的組件，在將該組件通過<component :is="Component" />渲染，渲染之前利用<KeepAlive :include="keepAliveComps">來過濾當前組件是否需要保活， 基于上述機制，通過簡單的路由配置中的meta.leaveCaches = [...]來配置從當前路由出發到哪些路由時，需要快取當前路由的內容，
本文轉載于:
https://juejin.cn/post/7216262593718173752
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551964.html
標籤：其他
下一篇：返回列表