Vue中设置多个路由query参数实现页面刷新后保留筛选状态

原有代码出现参数覆盖，是因为每次调用$router.push时传入的query对象仅包含单个筛选项，会直接替换路由上已存的全部query参数，而非在原有参数基础上更新。同时代码缺失两个核心逻辑：

• 未监听currentNumOfReplies变化同步路由参数
• 未在页面加载时读取URL query回填筛选状态，导致刷新后状态丢失

1. 初始化阶段回填URL参数 #

组件创建时从当前路由的query对象中读取已有参数，赋值给绑定v-model的三个筛选变量，完成刷新后的状态还原。

注意：路由query中存储的参数默认均为字符串类型，回填数字、布尔类参数时必须做显式类型转换，否则会导致筛选逻辑判断异常

2. 合并更新路由参数 #

封装公共的query更新方法，每次参数变化时先拷贝已有的全部query字段，再更新/删除当前变化的筛选项对应字段，从根本上避免参数覆盖问题。

export default {
  data() {
    return {
      currentUser: null,
      currentNumOfReplies: null,
      filterKeyword: null,
    }
  },
  created() {
    // 页面加载/刷新时从URL回填筛选状态
    const { user, numOfReplies, keyword } = this.$route.query
    this.currentUser = user || null
    this.currentNumOfReplies = numOfReplies ? Number(numOfReplies) : null
    this.filterKeyword = keyword || null
  },
  watch: {
    currentUser(newVal) {
      this.updateRouteQuery({ user: newVal })
    },
    currentNumOfReplies(newVal) {
      this.updateRouteQuery({ numOfReplies: newVal })
    },
    filterKeyword(newVal) {
      this.updateRouteQuery({ keyword: newVal })
    }
  },
  methods: {
    // 公共方法：合并更新路由query，不覆盖原有参数
    updateRouteQuery(newParams) {
      const newQuery = { ...this.$route.query }
      Object.entries(newParams).forEach(([key, value]) => {
        // 空值直接删除对应query字段，保持URL整洁
        if (value === null || value === undefined || value === '') {
          delete newQuery[key]
        } else {
          newQuery[key] = value
        }
      })
      // 捕获重复跳转同路由的冗余报错
      this.$router.push({ query: newQuery }).catch(err => {
        if (err.name !== 'NavigationDuplicated') throw err
      })
    }
  }
}

• 如果filterKeyword是输入框实时触发的场景，可以给对应watch加300ms防抖，避免频繁触发路由跳转
• 如果不需要每次筛选都保留浏览器历史记录，可以将$router.push替换为$router.replace，不会额外增加历史栈条目
• 如果筛选项包含默认值，记得在回填逻辑中处理默认值与URL参数的优先级

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