如何让Vue Router通过URL查询参数而非URL路径实现导航？

要实现将路由路径放到path查询参数中（比如/?path=/budget/1），Vue Router没有现成的pathInQuery配置项，但可以通过自定义路由历史模式或结合导航守卫来实现。

方案一：自定义Query History模式（无刷新跳转） #

这种方式能实现无刷新的路由切换，完全匹配需求：

import { createRouter, History } from 'vue-router'
import BudgetView from './views/BudgetView.vue'

// 自定义QueryHistory类，继承Vue Router的History基类
class QueryHistory extends History {
  constructor(options) {
    super(options)
    // 初始化时解析URL中的path参数，跳转到对应路由
    const urlParams = new URLSearchParams(window.location.search)
    const initialPath = urlParams.get('path') || '/'
    this.push(initialPath)
  }

  // 重写push方法，将目标路径转为查询参数形式
  push(to) {
    const targetPath = typeof to === 'string' ? to : to.path
    const url = new URL(window.location.origin)
    url.searchParams.set('path', targetPath)
    // 更新浏览器历史记录
    window.history.pushState({}, '', url.toString())
    // 通知Vue Router执行路由切换
    this.transitionTo(to)
  }

  // 重写replace方法，逻辑和push一致
  replace(to) {
    const targetPath = typeof to === 'string' ? to : to.path
    const url = new URL(window.location.origin)
    url.searchParams.set('path', targetPath)
    window.history.replaceState({}, '', url.toString())
    this.transitionTo(to)
  }
}

// 创建Router实例
const router = createRouter({
  history: new QueryHistory(),
  routes: [
    {
      path: '/budget/:budgetId(\\d+)?',
      name: 'budget',
      component: BudgetView,
    },
  ],
})

// 监听浏览器前进后退事件，同步路由状态
window.addEventListener('popstate', () => {
  const urlParams = new URLSearchParams(window.location.search)
  const path = urlParams.get('path') || '/'
  router.push(path)
})

export default router

方案二：结合导航守卫（简单版） #

如果不想自定义History类，也可以用全局导航守卫实现，缺点是跳转时会触发页面刷新：

import { createRouter, createWebHistory } from 'vue-router'
import BudgetView from './views/BudgetView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/budget/:budgetId(\\d+)?',
      name: 'budget',
      component: BudgetView,
    },
  ],
})

// 全局前置守卫，拦截路由跳转，转为查询参数形式
router.beforeEach((to, from, next) => {
  // 避免循环跳转：如果当前已经是根路径且path参数匹配目标路径，直接放行
  const currentPathParam = new URLSearchParams(window.location.search).get('path')
  if (window.location.pathname === '/' && currentPathParam === to.path) {
    next()
    return
  }
  // 跳转到根路径并携带path参数
  const url = new URL(window.location.origin)
  url.searchParams.set('path', to.path)
  window.location.href = url.toString()
})

// 初始化时解析path参数，跳转到对应路由
const initialPathParam = new URLSearchParams(window.location.search).get('path')
if (initialPathParam && initialPathParam !== window.location.pathname) {
  router.push(initialPathParam)
}

export default router

说明 #

• 两种方案都能让所有路由导航以/?path=xxx的形式呈现，静态服务器只需返回根路径的index.html即可，刷新页面时不会出现404。
• 方案一的无刷新体验更接近原生Vue Router的history模式，推荐优先使用。

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