vue里params与query的使用方法

在Vue开发中，params与query是用于在路由之间传递数据的两种常见方式，它们各自有着独特的特点和使用场景。

params的使用方法

• 定义路由：在定义路由时，需要在路径中使用动态参数。例如，在路由配置文件中定义一个带有动态参数 id 的路由：

{
  path: '/user/:id',
  name: 'user',
  component: User
}

• 编程式导航：在需要导航到该路由的组件中，可以使用 $router.push 方法并传递包含参数的对象。

this.$router.push({ name: 'user', params: { id: 1 } });

• 获取参数：在目标组件中，可以通过 $route.params 来获取传递过来的参数。

mounted() {
  console.log(this.$route.params.id);
}

query的使用方法

• 编程式导航：使用 $router.push 方法并在 query 属性中传递参数。例如：

this.$router.push({ path: '/search', query: { keyword: 'Vue' } });

• 获取参数：在目标组件中，通过 $route.query 来获取传递的参数。

mounted() {
  console.log(this.$route.query.keyword);
}

两者的区别

• URL显示：params 传递的参数不会在URL的查询字符串中显示，而是作为路径的一部分；而 query 传递的参数会在URL的查询字符串中显示。
• 刷新页面：params 刷新页面后参数可能会丢失，因为它依赖于路由的匹配；query 在刷新页面时参数不会丢失，因为它包含在URL中。
• 适用场景：params 适用于传递与具体资源相关的标识符，如用户ID、文章ID等；query 适用于传递一些可选的查询参数，如搜索关键词、分页参数等。

在Vue开发中，根据实际需求合理选择 params 和 query 来传递数据，可以使路由导航更加灵活和高效。掌握它们的使用方法，能够更好地构建功能强大的Vue应用程序。