快捷導(dǎo)航

在Vue項(xiàng)目中使用URL Query保存和恢復(fù)搜索條件的操作指南

更新時(shí)間：2025年09月18日 10:28:39 作者：EMT

在實(shí)際的前端開發(fā)中,我們經(jīng)常會(huì)遇到這樣的需求：用戶在列表頁(yè)輸入了一些搜索條件,點(diǎn)擊某一條數(shù)據(jù)進(jìn)入詳情頁(yè)；當(dāng)他返回列表頁(yè)時(shí),希望搜索條件能被記住,而不是重新初始化,本文給大家介紹了Vue使用URL Query保存和恢復(fù)搜索條件的操作指南,需要的朋友可以參考下

引言

在實(shí)際的前端開發(fā)中，我們經(jīng)常會(huì)遇到這樣的需求：
用戶在列表頁(yè)輸入了一些搜索條件，點(diǎn)擊某一條數(shù)據(jù)進(jìn)入詳情頁(yè)；當(dāng)他返回列表頁(yè)時(shí)，希望搜索條件能被記住，而不是重新初始化。

常見的解決方案有三種：

使用 全局狀態(tài)管理（Vuex/Pinia） 保存搜索條件。
使用 keep-alive 緩存頁(yè)面組件。
使用 URL Query 參數(shù) 把搜索條件保存在地址欄中。

本文介紹的是第三種方式，通過封裝一個(gè) useQueryStorage Hook，把對(duì)象序列化到 URL 的 querystring 中，從而實(shí)現(xiàn)搜索條件的記憶。

核心代碼

import { isEqual } from "lodash-es";
import { useRouter, useRoute } from "vue-router";

export const useQueryStorage = <T>(key: string = "savedQuery") => {
  const router = useRouter();
  const route = useRoute();

  // 把對(duì)象以 JSON 的格式存入到 URL 的 querystring 中
  const saveObjectToQueryString = (obj: T) => {
    const query = parseSavedObjectFromQueryString();
    if (!isEqual(query, obj)) {
      router.replace({
        query: {
          ...route.query,
          [key]: encodeURIComponent(JSON.stringify(obj)),
        },
      });
    }
  };

  // 從 URL 的 querystring 中解析出對(duì)象
  const parseSavedObjectFromQueryString: () => T | null = () => {
    let query = route.query[key];
    if (query && typeof query === "string") {
      query = JSON.parse(decodeURIComponent(query));
      return query as T;
    }
    return null;
  };

  return {
    getQ: parseSavedObjectFromQueryString,
    setQ: saveObjectToQueryString,
  };
};

代碼解析

1. 存儲(chǔ)對(duì)象到 URL

const saveObjectToQueryString = (obj: T) => {
  const query = parseSavedObjectFromQueryString();
  if (!isEqual(query, obj)) {
    router.replace({
      query: {
        ...route.query,
        [key]: encodeURIComponent(JSON.stringify(obj)),
      },
    });
  }
};

這里使用了 JSON.stringify 把對(duì)象轉(zhuǎn)成字符串，再用 encodeURIComponent 確保字符串在 URL 中不會(huì)出錯(cuò)。

為什么要用 lodash.isEqual？

因?yàn)?Vue Router 的 replace 會(huì)更新 URL，如果我們每次都寫入同樣的對(duì)象，就會(huì)產(chǎn)生冗余的路由更新。用 isEqual 做深度比較，可以避免不必要的刷新。

2. 從 URL 解析對(duì)象

const parseSavedObjectFromQueryString: () => T | null = () => {
  let query = route.query[key];
  if (query && typeof query === "string") {
    query = JSON.parse(decodeURIComponent(query));
    return query as T;
  }
  return null;
};

這一段邏輯就是把 querystring 里的值取出來，做 解碼 + JSON 反序列化，還原成原來的對(duì)象。

3. Hook 的返回值

return {
  getQ: parseSavedObjectFromQueryString,
  setQ: saveObjectToQueryString,
};

對(duì)外提供兩個(gè)方法：

getQ()：獲取保存的搜索條件。
setQ(obj)：設(shè)置搜索條件并保存到 URL。

這樣調(diào)用方的代碼就會(huì)非常簡(jiǎn)潔。

使用示例

在列表頁(yè)中：

const { getQ, setQ } = useQueryStorage<{ keyword: string; page: number }>();

// 初始化時(shí)恢復(fù)
const saved = getQ();
if (saved) {
  searchForm.keyword = saved.keyword;
  searchForm.page = saved.page;
}

// 用戶點(diǎn)擊搜索時(shí)保存
function handleSearch() {
  setQ({ keyword: searchForm.keyword, page: searchForm.page });
}

當(dāng)用戶進(jìn)入詳情頁(yè)再返回時(shí)，URL 中依然保存了搜索條件，頁(yè)面加載時(shí)會(huì)自動(dòng)恢復(fù)。

優(yōu)點(diǎn)總結(jié)

刷新不丟失
因?yàn)闋顟B(tài)存放在 URL 里，刷新后依然可以恢復(fù)。
可分享鏈接
用戶可以直接復(fù)制 URL，別人打開時(shí)能看到相同的搜索條件。
解耦全局狀態(tài)
不依賴 Vuex/Pinia，邏輯簡(jiǎn)單清晰。

缺點(diǎn)是：如果搜索條件非常復(fù)雜，URL 會(huì)變長(zhǎng)，可能不太美觀。

總結(jié)

useQueryStorage 是一個(gè)非常實(shí)用的小 Hook，通過 encodeURIComponent 和 JSON.stringify 將對(duì)象持久化到 URL 的 query 參數(shù)中，結(jié)合 lodash.isEqual 避免重復(fù)寫入，能很好地解決 列表頁(yè)返回時(shí)記住搜索條件 的問題。

以上就是在Vue項(xiàng)目中使用URL Query保存和恢復(fù)搜索條件的操作指南的詳細(xì)內(nèi)容，更多關(guān)于Vue URL Query保存和恢復(fù)搜索條件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: