Next.js 14中设置URLSearch Params的重置参数问题

以下是几种适配不同场景的路由查询参数重置方案：

• 清空全部查询参数
  直接将query设为空对象，即可移除URL上所有筛选相关参数：

  this.$router.push({ query: {} })
  

  若不想新增浏览器历史记录，改用replace：

  this.$router.replace({ query: {} })
  

• 重置指定参数（保留其他参数）
  若只需清空部分筛选条件、保留其余参数，可先解构当前查询参数，删除目标键后再推送：

  // 示例：清空status参数，保留其他筛选条件
  const updatedQuery = { ...this.$route.query }
  delete updatedQuery.status
  this.$router.push({ query: updatedQuery })
  

• 重置为默认值
  如果筛选参数有默认值（比如分页默认页码为1），重置时可将对应参数设回默认值：

  this.$router.push({
    query: {
      ...this.$route.query,
      page: 1, // 重置页码为默认值
      keyword: '' // 清空关键词筛选
    }
  })
  

• Vue3 Composition API 写法
  若项目使用Vue3+组合式API，先获取路由实例再操作：

  import { useRouter } from 'vue-router'
  const router = useRouter()
  
  // 清空全部参数
  router.push({ query: {} })
  

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