Nuxt3/Vue中useRoute与useRouter区别及router.push传参失效问题

• useRoute()：返回响应式的当前路由状态对象，等价于选项式API中的this.$route。对象包含当前页面的全部路由信息：路径path、路径参数params、查询参数query、路由元信息meta、完整路径fullPath等，所有属性均为响应式，仅用于在页面内读取当前路由的参数、路径信息，本身不提供路由操作方法。
• useRouter()：返回全局的路由实例对象，等价于选项式API中的this.$router。对象挂载了所有路由操作方法：跳转push/replace、回退back/go、动态添加路由addRoute、全局守卫注册beforeEach等，仅用于执行路由跳转、修改路由配置类操作，本身不存储实时的当前路由状态。

问题原因 #

router.push传入带path属性的对象时，路由内部只会解析path对应的纯路径部分，手动拼接在path字符串后的查询字符串会被直接忽略，不会纳入路由解析逻辑，因此跳转后查询参数会全部丢失。

正确写法 #

有两种可实现预期效果的写法，优先推荐第一种：

1. 分离路径和查询参数，通过query字段单独传参，路由会自动拼接查询字符串并处理URL编码：

const SearchTaxi = () => {
  router.push({
    path: '/airport-transfers/results',
    query: {
      pickuppoint: pickuppoint.value,
      dropoffpoint: dropoffpoint.value
    }
  })
}

2. 如果要手动拼接完整带参路径，直接给router.push传字符串即可，不要包裹在带path属性的对象里：

const SearchTaxi = () => {
  router.push(`/airport-transfers/results?pickuppoint=${pickuppoint.value}&dropoffpoint=${dropoffpoint.value}`)
}

注意：手动拼接字符串的写法不会自动处理URL编码，如果参数包含中文、空格、&等特殊字符，会出现参数解析异常，非特殊场景不推荐使用。

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