Vue+Quasar组合式API：路由切换时清除URL的itemid参数

针对你的问题，这里有几种在Quasar+Vue组合式API环境下的解决办法：

1. 全局路由守卫自动清除参数 #

在路由配置文件（比如router/index.ts）里添加全局前置守卫，每次路由跳转时检查并移除itemid参数：

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

router.beforeEach((to, from, next) => {
  if (window.location.search.includes('itemid')) {
    const newUrl = new URL(window.location.toString())
    newUrl.searchParams.delete('itemid')
    window.history.replaceState({}, '', newUrl)
  }
  next()
})

export default router

2. 路由链接显式清空查询参数 #

在使用<router-link>的时候，直接指定query为空对象，强制跳转时不带任何查询参数：

<router-link :to="{ path: '/contacts', query: {} }">
  联系人页面
</router-link>

<router-link :to="{ path: '/settings', query: {} }">
  设置页面
</router-link>

3. 页面卸载时清除参数 #

在IndexPage组件的onUnmounted钩子中移除参数，确保离开首页时清理URL：

import { onUnmounted } from 'vue'

// ...其他组件代码

onUnmounted(() => {
  const currentUrl = new URL(window.location.toString())
  if (currentUrl.searchParams.has('itemid')) {
    currentUrl.searchParams.delete('itemid')
    window.history.replaceState({}, '', currentUrl)
  }
})

推荐优先使用第一种全局守卫的方式，能统一处理所有路由跳转场景，无需在每个路由链接上单独配置。

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