在Vue項目中使用URL Query保存和恢復搜索條件的操作指南

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

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

引言

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

常見的解決方案有三種：

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

本文介紹的是第三種方式，通過封裝一個 useQueryStorage Hook，把對象序列化到 URL 的 querystring 中，從而實現(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();

  // 把對象以 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 中解析出對象
  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. 存儲對象到 URL

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

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

為什么要用 lodash.isEqual？

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

2. 從 URL 解析對象

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 反序列化，還原成原來的對象。

3. Hook 的返回值

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

對外提供兩個方法：

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

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

使用示例

在列表頁中：

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

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

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

當用戶進入詳情頁再返回時，URL 中依然保存了搜索條件，頁面加載時會自動恢復。

優(yōu)點總結(jié)

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

缺點是：如果搜索條件非常復雜，URL 會變長，可能不太美觀。

總結(jié)

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

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

您可能感興趣的文章: