Vue 路由传参和命名路由：搞定路由参数不是梦！

Vue 路由传参：传递数据之间的桥梁

在 Vue.js 中，路由不仅仅是浏览页面。它们还扮演着传递数据的重要角色，使组件能够相互通信并共享信息。本文将深入探讨 Vue 路由中两种强大的传参方式：query 传参 和 params 传参 。

query 传参：将数据附加到 URL 中

query 传参 使用查询字符串将数据附加到 URL 的末尾。它们以问号 (?) 开始，并使用 & 符号分隔多个参数。

1.1. 使用 query 传参

a. 字符串写法：

this.$router.push({path: '/user', query: {id: 123}})

b. 对象写法：

this.$router.push({path: '/user', query: {id: 123, name: 'John'}})

1.2. 在组件中接收 query 传参

在组件中，可以使用 this.$route.query 对象访问 query 参数：

export default {
  data() {
    return {
      id: this.$route.query.id,
      name: this.$route.query.name
    }
  }
}

命名路由：使用路由名称简化传参

命名路由 为路由分配一个名称，而不是使用固定的路径。这提供了在传参中使用更简洁的语法。

2.1. 配置命名路由

在 router/index.js 中，为路由添加一个 name 属性：

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})

2.2. 使用命名路由

在 to 属性中，使用路由名称跳转到该路由：

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

params 传参：动态路径中的占位符

params 传参 使用占位符 (: 符号后跟参数名称) 将数据直接嵌入到路由路径中。

3.1. 使用 params 传参

a. 字符串写法：

this.$router.push({path: '/user/123'})

b. 对象写法：

this.$router.push({path: '/user', params: {id: 123}})

3.2. 在组件中接收 params 传参

在组件中，可以使用 this.$route.params 对象访问 params 参数：

export default {
  data() {
    return {
      id: this.$route.params.id
    }
  }
}

选择合适的传参方式

选择合适的传参方式取决于需要传递数据的类型和范围：

• query 传参 适用于需要附加到 URL 中的临时数据，例如筛选或排序参数。
• 命名路由 适用于需要简化路径传参的路由。
• params 传参 适用于需要动态修改路由路径的数据，例如在用户配置文件中显示用户名。

常见问题解答

1. query 传参和 params 传参有什么区别？

query 传参附加到 URL 中，而 params 传参嵌入到路由路径中。

2. 什么时候使用命名路由？

当需要简化路由路径传参时。

3. 如何在组件中获取 query 传参？

使用 this.$route.query 对象。

4. 如何在组件中获取 params 传参？

使用 this.$route.params 对象。

5. params 传参可以包含哪些字符？

只能包含字母、数字、下划线和连字符。

结论

Vue 路由传参是传递数据之间的一座桥梁，使组件能够共享信息并创建动态的应用程序。通过了解 query 传参和 params 传参的细微差别，开发人员可以构建高效且灵活的 Vue.js 应用程序。