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

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

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

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

步驟一：添加 keepAlive: true

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

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

defineOptions({
  name: "lookLucky"
});

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

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

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

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

步驟二：新增一個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ù)需要一一對應
  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ù)需要一一對應
    createStatus: number | string | string[] | number[] | null,
    model: string,
    id?: number | string | string[] | number[] | null
  ) {
    if (model === "query") {
      // 保存信息到標簽頁
      useMultiTagsStoreHook().handleTags("push", {
          // 跳轉(zhuǎn)目標頁的路由
        path: `/lucky/luckyEvent/EditBag`,
        name: "EditBagEvent",   // 跳轉(zhuǎn)目標頁的路由名
        query: { id: String(id), createStatus: String(createStatus) },   // 跳轉(zhuǎn)目標頁的參數(shù)
        meta: {
          title: {
            zh: `${createStatus == 1 ? "添加" : "修改"}福袋活動`,  // 可以動態(tài)修改標簽頁名稱
            en: `${createStatus == 1 ? "添加" : "修改"}福袋活動`   // 可以動態(tài)修改標簽頁名稱
          },
          // 最大打開標簽數(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ù)需要一一對應
      if (id) toDetail(createStatus as string, model, id as string);
    });
  }
  return { toDetail, initToDetail, id, createStatus, router };  // 導出參數(shù)，跳轉(zhuǎn)目標頁可以獲取到
}

當前頁

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

跳轉(zhuǎn)目標頁

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

關(guān)閉標簽頁

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

需要注意

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

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

您可能感興趣的文章: