Vue3+Quasar2.6如何添加持久化URL查询参数？

问题根源 #

你之前的两个方案都会触发无限递归：

1. 第一个方案每次强制将from.query覆盖to.query，导致每次导航都会生成新路由对象，反复触发beforeEach钩子
2. 第二个方案仅判断to.query是否为空，若跳转时to已有其他参数但缺少目标参数，或全量复制from.query导致路由对象重复修改，依然会触发循环

解决方案 #

1. 规范路由守卫逻辑（放在router创建文件中） #

指定要持久化的特定参数（避免全量复制所有query引发的问题），仅在目标参数缺失时补充，否则直接放行：

// router/index.ts
import routes from './routes';

export default route(function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,
    history: createHistory(process.env.VUE_ROUTER_BASE),
  });

  // 定义需要持久化的目标参数名（比如你的初始化状态参数）
  const PERSIST_PARAM = 'initState';

  Router.beforeEach((to, from) => {
    // 目标参数已存在，直接放行
    if (to.query[PERSIST_PARAM]) {
      return;
    }

    // 从来源路由或当前路由获取目标参数
    const persistValue = from.query[PERSIST_PARAM] || Router.currentRoute.value.query[PERSIST_PARAM];
    
    if (persistValue) {
      // 合并现有query和目标参数，返回新路由对象
      return {
        ...to,
        query: {
          ...to.query,
          [PERSIST_PARAM]: persistValue,
        },
      };
    }

    // 无目标参数时直接放行
    return;
  });

  return Router;
});

2. 状态变更时同步更新URL参数 #

使用router.replace（而非push）更新参数，避免添加冗余历史记录，同时防止触发不必要的导航循环：

// 在组件中调用
import { useRouter } from 'vue-router';

const router = useRouter();

// 状态变更时同步更新URL参数
const syncQueryParam = (newStateValue: string) => {
  router.replace({
    ...router.currentRoute.value,
    query: {
      ...router.currentRoute.value.query,
      initState: newStateValue,
    },
  });
};

3. 应用启动时初始化状态 #

从当前路由query中提取参数初始化应用状态：

// 比如在App.vue或store初始化中
import { useRoute } from 'vue-router';

const route = useRoute();

// 用路由参数初始化状态
const appState = ref(route.query.initState || '默认初始值');

关键注意事项 #

• 只针对单个/特定参数做持久化，不要全量复制所有query，避免干扰其他业务的参数传递
• 路由守卫中仅在目标参数缺失时修改路由，否则直接放行，杜绝不必要的导航触发
• 用replace更新参数，减少历史记录冗余，降低导航守卫触发频率

内容的提问来源于stack exchange，提问作者Shrike