参数转瞬即逝，万变由心：this.$router路由params和query

2023-10-20 04:23:42

在 Vue.js 中传递路由数据：this.router.params 和 this.router.query 的指南

在 Vue.js 的单页面应用程序中，在不同页面之间传递数据对于实现交互式和动态的用户体验至关重要。this.router.params 和 this.router.query 是实现这一目标的两种常用方法。本文将深入探讨这两种方法的异同、使用场景以及它们的优点和缺点。

1. this.$router.params

动态路由参数

this.$router.params 用于传递动态路由参数。动态路由是指 URL 中包含变量的部分，允许根据特定的值渲染不同的组件。例如，考虑以下路由：

/user/:id

在这个例子中，":id" 是动态路由参数，可以接收不同的用户 ID 值，例如 /user/1、/user/2 和 /user/3。

访问 params

要访问动态路由参数，您可以在 Vue 组件中使用 route 对象，然后通过 route.params 访问它们。例如：

// 在 Vue 组件中
export default {
  data() {
    return {
      userId: this.$route.params.id
    }
  }
}

在上面的示例中，我们将动态路由参数 "id" 赋给了组件 data 中的 userId 属性。这使我们可以在组件中使用 userId 访问动态路由参数的值。

2. this.$router.query

查询参数

this.$router.query 用于传递查询参数。查询参数是指 URL 中问号 (?) 后的部分，用于传递附加信息。例如：

/search?q=vue.js

在这个例子中，"q=vue.js" 是查询参数，它表示正在搜索 "vue.js" 这个关键词。

访问 query

要访问查询参数，您可以在 Vue 组件中使用 route 对象，然后通过 route.query 访问它们。例如：

// 在 Vue 组件中
export default {
  data() {
    return {
      query: this.$route.query
    }
  }
}

在上面的示例中，我们将查询参数对象赋给了组件 data 中的 query 属性。这使我们可以在组件中使用 query 访问查询参数的值。

3. this.router.params 和 this.router.query 的异同

相同点

不同点

类型： this.router.params 用于传递动态路由参数，而 this.router.query 用于传递查询参数。
必需性： this.router.params 是必填的，而 this.router.query 是可选的。
格式： this.router.params 的值是字符串，而 this.router.query 的值是对象。
生命周期： this.router.params 只能在组件的 created 钩子函数中访问，而 this.router.query 可以在组件的任何生命周期钩子函数中访问。

4. 什么时候使用 this.router.params，什么时候使用 this.router.query

一般来说，当您需要传递动态路由参数时，应该使用 this.router.params。当您需要传递查询参数时，应该使用 this.router.query。

使用 this.$router.params 的场景