Pure admin-Router標(biāo)簽頁配置與頁面持久化實(shí)現(xiàn)方法詳解

更新時(shí)間：2023年01月19日 08:54:20 作者：fanction

這篇文章主要介紹了Pure admin-Router標(biāo)簽頁配置與頁面持久化實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

頁面持久化（適用與單個(gè)頁面，跳轉(zhuǎn)頁面不適用）：

步驟一：添加 keepAlive: true

{
      path: "/lucky/lookLucky",
      name: "lookLucky",
      component: () => import("@/views/lucky/lookLucky/index.vue"),
      meta: {
        title: $t("查看幸運(yùn)活動(dòng)"),
        showLink: false,
        keepAlive: true   // 添加 keepAlive: true   
      }
    }

步驟二：在需要持久化的頁面使用defineOptions選擇當(dāng)前頁，name的名字就是當(dāng)前頁的路由名

defineOptions({
  name: "lookLucky"
});

頁面跳轉(zhuǎn)傳參以及持久化-標(biāo)簽頁名稱配置

某些情況下，做標(biāo)簽頁跳轉(zhuǎn)時(shí)需要將當(dāng)前頁的某條信息的名稱或者是狀態(tài)攜帶到跳轉(zhuǎn)頁目標(biāo)頁，并且目標(biāo)頁刷新后數(shù)據(jù)還是存在，這就需要做頁面的持久化以及hooks配置。

步驟一：先在路由頁配置路由

{
      path: "/lucky/luckyEvent/EditBag",
      name: "EditBagEvent",
      component: () =>
        import("@/views/lucky/luckyEvent/EditBag/index.vue"),
      meta: {
        title: $t("幸運(yùn)活動(dòng)編輯"),
        showLink: false,  // 不在左側(cè)菜單顯示
      }
    }

步驟二：新增一個(gè)hooks.ts文件

import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRouter, useRoute } from "vue-router";
import { onBeforeMount } from "vue";
export function useDetail() {
  const route = useRoute();
  const router = useRouter();
  // 這里的id、createStatus ，就是跳轉(zhuǎn)頁傳入的，傳入的參數(shù)需要一一對(duì)應(yīng)
  const id = route.query?.id ? route.query?.id : route.params?.id;
  const createStatus = route.query?.createStatus
    ? route.query?.createStatus
    : route.params?.createStatus;
  function toDetail(
    // 這里的id、createStatus ，就是跳轉(zhuǎn)頁傳入的，傳入的參數(shù)需要一一對(duì)應(yīng)
    createStatus: number | string | string[] | number[] | null,
    model: string,
    id?: number | string | string[] | number[] | null
  ) {
    if (model === "query") {
      // 保存信息到標(biāo)簽頁
      useMultiTagsStoreHook().handleTags("push", {
          // 跳轉(zhuǎn)目標(biāo)頁的路由
        path: `/lucky/luckyEvent/EditBag`,
        name: "EditBagEvent",   // 跳轉(zhuǎn)目標(biāo)頁的路由名
        query: { id: String(id), createStatus: String(createStatus) },   // 跳轉(zhuǎn)目標(biāo)頁的參數(shù)
        meta: {
          title: {
            zh: `${createStatus == 1 ? "添加" : "修改"}福袋活動(dòng)`,  // 可以動(dòng)態(tài)修改標(biāo)簽頁名稱
            en: `${createStatus == 1 ? "添加" : "修改"}福袋活動(dòng)`   // 可以動(dòng)態(tài)修改標(biāo)簽頁名稱
          },
          // 最大打開標(biāo)簽數(shù)
          dynamicLevel: 1
        }
      });
      // 路由跳轉(zhuǎn)，EditBagEvent 攜帶參數(shù)
      router.push({
        name: "EditBagEvent",
        query: { id: String(id), createStatus: String(createStatus) }
      });
    }
  }
  function initToDetail(model) {
    onBeforeMount(() => {
        // 這里的id、createStatus ，就是跳轉(zhuǎn)頁傳入的，傳入的參數(shù)需要一一對(duì)應(yīng)
      if (id) toDetail(createStatus as string, model, id as string);
    });
  }
  return { toDetail, initToDetail, id, createStatus, router };  // 導(dǎo)出參數(shù)，跳轉(zhuǎn)目標(biāo)頁可以獲取到
}

當(dāng)前頁

// 引入hooks文件
import { useDetail } from "./hooks";
// 當(dāng)前頁的路由名
defineOptions({
  name: "luckyBagEvent"
});
const { toDetail } = useDetail();
// 添加
const createStatus = ref(0); // 0修改 1創(chuàng)建
const addBagEvent = () => {   // 點(diǎn)擊事件，也可以直接寫在HTML標(biāo)簽上
  createStatus.value = 1;
  toDetail(createStatus.value, "query");  // 跳轉(zhuǎn)（參數(shù)，query模式）
};

跳轉(zhuǎn)目標(biāo)頁

// 引入 hooks
import { useDetail } from "../hooks";
// 設(shè)置當(dāng)前頁的路由名
defineOptions({
  name: "EditBag"
});
// 獲取路由參數(shù)以及方法
const { initToDetail, id, createStatus, router } = useDetail();
initToDetail("query");  // query傳參方式
// 這里的initToDetail為回傳的路由，用作路由的參數(shù)緩存以及頁面持久

關(guān)閉標(biāo)簽頁

import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useDetail } from "../hooks";
const { router } = useDetail();
router.push("/luckyModul/luckyBag"); // 路由跳轉(zhuǎn)
// 關(guān)閉標(biāo)簽頁，router.currentRoute.value.path就是需要關(guān)閉的路由，固定寫法，不要?jiǎng)?
useMultiTagsStoreHook().handleTags("splice", router.currentRoute.value.path);

需要注意

如果配置了hooks的同時(shí)還配置了keepAlive: true，那么頁面修改了之后，數(shù)據(jù)會(huì)持久保存，所以下次進(jìn)入頁面時(shí)還是當(dāng)前狀態(tài)，例如：數(shù)據(jù)清空，如果開啟了keepAlive，當(dāng)前頁數(shù)據(jù)清空了，下次跳轉(zhuǎn)進(jìn)入時(shí)，還是清空的狀態(tài)，不會(huì)重新刷新，如果需要重新刷新，需要關(guān)閉keepAlive。

到此這篇關(guān)于Pure admin-Router標(biāo)簽頁配置與頁面持久化實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)Pure admin-Router標(biāo)簽頁配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: