Vue頁(yè)面?；罘椒ㄊ鞘裁?/h1>

發(fā)布時(shí)間：2023-04-13 10:11:22 來(lái)源：億速云 閱讀：198 作者：iii 欄目：編程語(yǔ)言

本篇內(nèi)容主要講解“Vue頁(yè)面保活方法是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue頁(yè)面?；罘椒ㄊ鞘裁础卑?

為了讓頁(yè)面?；罡臃€(wěn)定，你們是怎么做的？

我用一行配置實(shí)現(xiàn)了

為什么需要頁(yè)面?；睿?/h3>

頁(yè)面?；羁梢蕴岣哂脩舻捏w驗(yàn)感。例如，當(dāng)用戶從一個(gè)帶有分頁(yè)的表格頁(yè)面（【頁(yè)面A】）跳轉(zhuǎn)到數(shù)據(jù)詳情頁(yè)面（【頁(yè)面B】），并查看了數(shù)據(jù)之后，當(dāng)用戶從【頁(yè)面B】返回【頁(yè)面A】時(shí)，如果沒(méi)有頁(yè)面保活，【頁(yè)面A】會(huì)重新加載并跳轉(zhuǎn)到第一頁(yè)，這會(huì)讓用戶感到非常煩惱，因?yàn)樗麄冃枰匦逻x擇頁(yè)面和數(shù)據(jù)。因此，使用頁(yè)面保活技術(shù)，當(dāng)用戶返回【頁(yè)面A】時(shí)，可以恢復(fù)之前選擇的頁(yè)碼和數(shù)據(jù)，讓用戶的體驗(yàn)更加流暢。

如何實(shí)現(xiàn)頁(yè)面?；睿?/h3>

狀態(tài)存儲(chǔ)

這個(gè)方案最為直觀，原理就是在離開(kāi)【頁(yè)面A】之前手動(dòng)將需要保活的狀態(tài)存儲(chǔ)起來(lái)?？梢詫顟B(tài)存儲(chǔ)到LocalStore、SessionStore或IndexedDB。在【頁(yè)面A】組件的onMounted鉤子中，檢測(cè)是否存在此前的狀態(tài)，如果存在從外部存儲(chǔ)中將狀態(tài)恢復(fù)回來(lái)。

有什么問(wèn)題？

• 浪費(fèi)心智（麻煩/操心）。這個(gè)方案存在的問(wèn)題就是，需要在編寫組件的時(shí)候就明確的知道跳轉(zhuǎn)到某些頁(yè)面時(shí)進(jìn)行狀態(tài)存儲(chǔ)。

• 無(wú)法解決子組件狀態(tài)。在頁(yè)面組件中還可以做到保存頁(yè)面組件的狀態(tài)，但是如何保存子組件呢。不可能所有的子組件狀態(tài)都在頁(yè)面組件中維護(hù)，因?yàn)檫@樣的結(jié)構(gòu)并不是合理。

組件緩存

利用Vue的內(nèi)置組件<KeepAlive/>緩存包裹在其中的動(dòng)態(tài)切換組件（也就是<Component/>組件）。<KeepAlive/>包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活躍的組件，而不是銷毀它們。當(dāng)一個(gè)組件在<KeepAlive/>中被切換時(shí)，activated和deactivated生命周期鉤子會(huì)替換mounted和unmounted鉤子。最關(guān)鍵的是，<KeepAlive/>不僅適用于被包裹組件的根節(jié)點(diǎn)，也適用于其子孫節(jié)點(diǎn)。

<KeepAlive/>搭配vue-router即可實(shí)現(xiàn)頁(yè)面的?；?，實(shí)現(xiàn)代碼如下：

<template>
  <RouterView v-slot="{ Component }">
    <KeepAlive>
      <component :is="Component"/>
    </KeepAlive>
  </RouterView>
</template>

有什么問(wèn)題？

• 頁(yè)面?；畈粶?zhǔn)確。上面的方式雖然實(shí)現(xiàn)了頁(yè)面?；?，但是并不能滿足生產(chǎn)要求，例如：【頁(yè)面A】是應(yīng)用首頁(yè)，【頁(yè)面B】是數(shù)據(jù)列表頁(yè)，【頁(yè)面C】是數(shù)據(jù)詳情頁(yè)。用戶查看數(shù)據(jù)詳情的動(dòng)線是：【頁(yè)面A】->【頁(yè)面B】->【頁(yè)面C】，在這條動(dòng)線中【頁(yè)面B】->【頁(yè)面C】的時(shí)候需要緩存【頁(yè)面B】，當(dāng)從【頁(yè)面C】->【頁(yè)面B】的時(shí)候需要從換從中恢復(fù)【頁(yè)面B】。但是【頁(yè)面B】->【頁(yè)面A】的時(shí)候又不需要緩存【頁(yè)面B】，上面的這個(gè)方法并不能做到這樣的配置。

最佳實(shí)踐

最理想的保活方式是，不入侵組件代碼的情況下，通過(guò)簡(jiǎn)單的配置實(shí)現(xiàn)按需的頁(yè)面?；睢?/strong>

【不入侵組件代碼】這條即可排除第一種方式的實(shí)現(xiàn)，第二種【組件緩存】的方式只是敗在了【按需的頁(yè)面?；睢俊Ｄ敲锤脑斓诙N方式，通過(guò)在router的路由配置上進(jìn)行按需?；畹呐渲?，再提供一種讀取配置結(jié)合<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: {
          // 離開(kāi)【/data-list】前往【/data-detail】時(shí)緩存【/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();
});

?；罱M件存儲(chǔ)

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];
    },
  },
});

頁(yè)面緩存

src/layout/index.vue

<template>
  <RouterView v-slot="{ Component }">
    <KeepAlive :include="keepAliveComps">
      <component :is="Component"/>
    </KeepAlive>
  </RouterView>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import useRouterStore from '@/store/router';

const { keepAliveComps } = storeToRefs(useRouterStore());
</script>

TypeScript提升配置體驗(yàn)

import 'vue-router';

export type LeaveCaches = string[];

declare module 'vue-router' {
  interface RouteMeta {
    leaveCaches?: LeaveCaches;
  }
}

該方案的問(wèn)題

• 缺少通配符處理/*、/**/index。

• 無(wú)法緩存/preview/:address這樣的動(dòng)態(tài)路由。

• 組件名和路由名稱必須保持一致。

到此，相信大家對(duì)“Vue頁(yè)面保活方法是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！