Vue Router同步UI过滤器query参数时更新/清除失效问题咨询

问题根因 #

两个异常的核心原因：

1. 原有逻辑遗漏了query[type]为字符串类型的处理分支，仅在新增参数、参数已为数组时做修改，字符串转数组的场景下没有把新值写入query对象，路由不会触发更新
2. 缺少空值处理逻辑：直接给query参数传空字符串/空数组时，vue-router不会自动删除对应参数，只有显式删除key或者赋值为undefined时，才会把参数从地址栏移除

修正后代码 #

// 拷贝原有query，避免直接修改路由原始对象
const newQuery = { ...this.$route.query }
// 处理当前修改的过滤参数
if (value == null || (Array.isArray(value) && value.length === 0) || value === '') {
  // 空值直接删除对应query key，触发路由参数清除
  delete newQuery[type]
} else {
  // 直接覆盖为新值，兼容字符串转数组、数组内容修改等所有场景
  newQuery[type] = value
}
// 同步到路由，可根据是否需要保留历史记录选择push/replace
this.$router.replace({ query: newQuery })

补充说明 #

如果路由参数变更后组件没有重新执行过滤逻辑，可添加query监听触发过滤：

watch: {
  '$route.query': {
    deep: true,
    handler(newQuery) {
      // 替换为你的过滤执行方法
      this.fetchFilteredData(newQuery)
    }
  }
}

内容的提问来源于stack exchange，提问作者A.Burdonskaya