Vue Router动态查询报错：导航至当前位置不被允许

我来帮你搞定这个Vue Router的问题！你遇到的Navigating to current location ("/?page=5") is not allowed错误，本质是Vue Router默认禁止重复导航到完全相同的路由（包括查询参数完全一致的情况）。下面给你几个靠谱的解决方案：

方案一：先判断参数是否变化，再执行跳转 #

最稳妥的方式是先对比当前路由的page参数和你要设置的selected值，只有当两者不同时才触发导航，从根源避免重复跳转：

let selected = this.currentPage;
// 注意：query参数都是字符串类型，要统一类型后再对比
const currentPage = this.$route.query.page;
if (String(selected) !== currentPage) {
  this.$router.replace({
    // 这里建议填写正确的路由name，或者用path: '/'替代空name，避免路由匹配异常
    path: '/',
    query: {...this.$route.query, page: String(selected) }
  });
}

这里要额外提醒：你的代码里name: ''可能会导致路由匹配问题，建议换成对应路由的name属性，或者直接用path: '/'来指定路径，这样更稳妥。

方案二：捕获重复导航的错误 #

如果你的业务场景中确实需要强制触发导航（比如即使参数相同也要刷新页面数据），可以通过捕获Promise的错误来忽略这个特定的导航报错：

let selected = this.currentPage;
this.$router.replace({
  path: '/',
  query: {...this.$route.query, page: String(selected) }
}).catch(err => {
  // 只忽略重复导航的错误，其他异常正常抛出
  if (err.name !== 'NavigationDuplicated') {
    throw err;
  }
});

为什么之前的解决方案无效？ #

你提到尝试过相关方案但没用，大概率是这两个原因：

• 参数类型不匹配：currentPage如果是数字类型，而$route.query.page是字符串类型，直接对比会导致判断逻辑失效；
• 路由配置问题：代码里name: ''没有匹配到正确的路由，导致导航逻辑异常。

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