Vue Router 4无法识别查询参数，URL格式异常致重定向问题

问题本质 #

Hash模式里，Vue Router只解析#之后的内容作为路由部分（包括查询参数）。#之前的参数属于浏览器全局URL参数，不在Vue Router的处理范围内，因此会出现参数无法获取、路由重定向异常的情况。

具体解决办法 #

1. 生成正确的带参URL #

不管是内部路由跳转还是外部链接，都要把查询参数附加到#之后的路由路径上：

• 内部使用router.push跳转：

  // 正确写法：参数放在query字段中，Vue Router会自动拼到#后
  router.push({ path: '/', query: { foo: 'bar' } })
  // 生成的目标URL：https://example.com/#/?foo=bar
  

• 外部跳转链接直接写https://example.com/#/?foo=bar，不要将参数放在#前面。

2. 兼容已存在的前置查询参数 #

如果有外部旧链接已经把参数放在#前面，可在应用初始化时手动读取并转移到路由的query中：

// 在main.js或路由配置文件中
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [/* 你的路由配置列表 */]
})

// 路由全局守卫：检查并转移前置参数
router.beforeEach((to, from, next) => {
  // 获取#前面的全局查询参数
  const globalParams = new URLSearchParams(window.location.search)
  if (globalParams.size > 0) {
    // 合并全局参数到路由query
    const newQuery = { ...to.query, ...Object.fromEntries(globalParams) }
    // 跳转至正确路由，replace避免冗余历史记录
    next({ path: to.path, query: newQuery, replace: true })
    // 清除地址栏中的前置参数
    window.history.replaceState({}, document.title, window.location.hash)
  } else {
    next()
  }
})

3. 排查服务器配置干扰 #

如果应用部署在服务器上，检查Nginx、Apache等服务是否存在自动修改URL结构的配置，导致#被后置。确保服务器不对hash部分做任何重写，直接返回index.html即可。

验证方法 #

启动应用后访问https://example.com/?foo=bar#/，应该会自动重定向到https://example.com/#/?foo=bar，此时通过组件内的$route.query.foo或路由实例的router.currentRoute.value.query.foo，就能正常获取到参数值。

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