Vue.js路由带两种方式_而查询参数就像在地址后面加了个小标签_定义动态路由比如useruserId
一、Vue.js路由带参数的两种方式
在Vue.js中，要给路由加上参数，主要有两种方法：动态路由匹配和查询参数。动态路由就像在路线上画了个记号，而查询参数就像在地址后面加了个小标签。动态路由匹配
想象一下，你在路上有个标记说“编号：”，后面跟着一个数字。动态路由就是这样的，你在路由路径里写个冒号加个名字，比如“:userId”，然后在组件里就能用这个名字来访问这个数字了。
- 定义动态路由：比如“/user/:userId”。
- 在组件中访问参数：使用`this.$route.params.userId`。
- 导航到带参数的路由：直接在URL中填写对应的参数，比如“/user/123”。
查询参数
查询参数就像在地址后面加了个“？”然后跟着一对括号，里面写的是名字和值，比如“?id=123”。在Vue组件里，你也能这样访问这些信息。
- 定义路由：就像上面一样，只是不需要动态参数。
- 在组件中访问查询参数：使用`this.$route.query.id`。
- 导航到带查询参数的路由：在URL的问号后面加上参数，比如“/search?id=123”。
动态路由和查询参数的比较
| 特性 | 动态路由匹配 | 查询参数 |
|---|---|---|
| URL 结构 | /user/:userId | /search?id=123 |
| 适用场景 | 唯一标识资源 | 多个可选参数，参数值可能变化 |
| 参数获取方式 | 高 | 中 |
| 可读性 | 高 | 适中 |
| SEO 友好性 | 高 | 低 |
| 简单参数传递 | 简单 | 适中 |
四、实例讲解
来个例子吧。比如一个电商网站，商品详情页可以用动态路由，搜索功能就用查询参数。
商品详情页（使用动态路由匹配）
URL：/product/:productId
搜索功能（使用查询参数）
URL：/search?q=手机
五、总结和建议
根据你的需求，选择合适的参数传递方式。动态路由匹配适合明确路径和唯一标识资源的场景，而查询参数适合传递多个可选参数且参数值可能变化的场景。
希望这篇小文章能帮到你，让你在Vue.js项目中更好地使用路由参数传递！