vue路由传参query和params

// Vue Router 使用 query 和 params 传参的示例代码

// 1. 使用 query 传参

// 定义路由
const routes = [
  {
    path: '/user',
    name: 'user',
    component: User
  }
]

// 跳转并传递参数
this.$router.push({ 
  name: 'user', 
  query: { id: 123, name: '张三' } 
})

// 在目标组件中获取参数
export default {
  mounted() {
    console.log(this.$route.query.id); // 输出: 123
    console.log(this.$route.query.name); // 输出: 张三
  }
}

// 2. 使用 params 传参

// 定义带参数的路由
const routes = [
  {
    path: '/user/:id/:name',
    name: 'user',
    component: User
  }
]

// 跳转并传递参数
this.$router.push({ 
  name: 'user', 
  params: { id: 123, name: '张三' } 
})

// 在目标组件中获取参数
export default {
  mounted() {
    console.log(this.$route.params.id); // 输出: 123
    console.log(this.$route.params.name); // 输出: 张三
  }
}

解释说明：

• query 参数：

  • 通过 URL 的查询字符串传递参数，例如 /user?id=123&name=张三。
  • 使用 this.$router.push() 方法中的 query 属性传递参数。
  • 在目标组件中使用 this.$route.query 获取参数。

• params 参数：

  • 通过 URL 的路径部分传递参数，例如 /user/123/张三。
  • 使用 this.$router.push() 方法中的 params 属性传递参数。
  • 在目标组件中使用 this.$route.params 获取参数。
  • 需要在定义路由时指定路径参数，如 path: '/user/:id/:name'。