Vue-route三种方式详解-比如-name=张三这里的
Vue-router传参的三种方式详解
一、路径参数（params）
路径参数就像在地址上填空，需要什么信息就填什么信息。
-
定义路由和占位符
比如，路由定义成“/user/:id”，这里的“:id”就是一个占位符。
-
导航并传递参数
比如，跳转到“/user/123”，这里的“123”就会填充到占位符位置。
-
在组件中获取参数
在组件里，你可以通过`this.$route.params.id`来获取这个参数。
二、查询参数（query）
查询参数就像是给地址加上一些可选的备注。
-
定义路由
查询参数不需要在路由中定义，它直接附加在路径后面。
-
导航并传递参数
比如，跳转到“/user?name=张三”，这里的“?name=张三”就是查询参数。
-
在组件中获取参数
在组件里，你可以通过`this.$route.query.name`来获取这个参数。
三、props传参
props传参就像是直接把信息从一个人传给另一个人。
-
配置路由并启用props
在路由配置中，将`props`设置为`true`或者传入一个函数。
-
导航并传递参数
跟路径参数类似，通过路由跳转传递参数。
-
在组件中接收props
在组件里，你直接通过`this.someProp`来接收传递的参数。
四、比较三种传参方式
| 方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 路径参数 | URL清晰，适用于必需参数 | 参数改变需要重新定义路由 | 用户详情页等 |
| 查询参数 | 可选参数，URL灵活 | URL可读性较差，参数较多时管理复杂 | 搜索页，过滤条件等 |
| props传参 | 组件独立性强，易于测试和复用 | 需要在路由配置中额外配置props传递 | 复杂组件通信等 |
五、实例说明
这里就不再详细展开了，你可以参考Vue Router的官方文档来学习如何在实际项目中使用这些传参方式。
六、总结
总的来说，Vue-router提供了三种主要的传参方式，每种都有其适用的场景。了解并合理使用这些传参方式，可以帮助你更高效地开发Vue.js应用。