Vue Router调用replace修改query仍触发created生命周期导致页面重载如何解决

• 核心原因是组件绑定了$route.fullPath作为唯一key值。Vue的虚拟DOM渲染逻辑中，key值变化会强制销毁原有组件实例、重新创建新的组件实例，自然会触发完整的生命周期包括created()钩子，表现为页面重载。
• 你期望的URL格式myUrl/10/section=Info不符合标准Query参数格式（标准Query参数以?开头，形式为myUrl/10?section=Info），如果你的项目里有路由重定向规则或者通配路由，也有可能触发路由重新匹配导致组件重载，但该场景概率较低。

方案1：修改router-view的key配置 #

将的key值从$route.fullPath调整为$route.path或者当前页面的唯一参数$route.params.id，这样只要页面路径和id参数不变，query参数变化时key值保持不变，组件就会复用不会重载：

<!-- 修改前 -->
<router-view :key="$route.fullPath" />
<!-- 修改后 -->
<router-view :key="$route.path" />
<!-- 或者针对当前页面的场景，用id作为key也可以 -->
<router-view :key="$route.params.id" />

修改后你需要新增对query参数的监听，来实现标签切换的逻辑：

watch: {
  '$route.query.section'(newVal) {
    // 执行标签切换的更新逻辑
    this.activeTab = newVal
  }
},
// 或者使用路由守卫
beforeRouteUpdate(to, from, next) {
  if(to.query.section) {
    this.activeTab = to.query.section
  }
  next()
}

方案2：调整路由配置适配你期望的URL格式 #

如果你确实需要URL为myUrl/10/section=Info的格式（不带?），可以将section作为路由params参数配置，修改路由规则如下：

path: ":id/:section?",
component: AdminOrganizationDetailComponent,
name: "csm.organizations.detail",
props: true

后续切换标签时使用params传参即可，不会触发组件重载：

this.$router.replace({params: { section: 'Info'} })

内容的提问来源于stack exchange，提问作者Ali Cemilcan Ciftarslan