- 通过params
- router-link路由导航
1. 查询参数方式：
```
html
<router-link :to="{ path: '/products', query: { category: 'shoes', color: 'blue' }}">Go to Products</router-link>
```
在目标路由中可以通过`$route.query`来获取传递的参数值。
2. 路径参数方式：
```
html
<router-link :to="{ path: '/products/' + productId }">Go to Product</router-link>
```
在目标路由中可以通过`$route.params`来获取传递的参数值。需要在路由配置中定义相应的路由参数。
3. 对象方式：
```
html
<router-link :to="{ path: '/products', params: { id: productId }, query: { category: 'shoes' }}">Go to Product</router-link>
```
- 调用$router.push实现路由传参
1. 查询参数方式：
```
javascript
this.$router.push({ path: '/products', query: { category: 'shoes', color: 'blue' }});
```
这将导航到`/products`路由，并在URL的查询字符串中传递参数。
2. 路径参数方式：
```
javascript
this.$router.push({ path: '/products/' + productId });
```
这将导航到带有路径参数的`/products/:id`路由。需要在路由配置中定义相应的路由参数。
3. 对象方式：
```
javascript
this.$router.push({ path: '/products', params: { id: productId }, query: { category: 'shoes' }});
```
```
需要注意的是：
`$router.push`方法接受一个路由对象作为参数，可以在该对象中指定路径、参数等信息。
参数值可以是动态的，可以从Vue组件的数据中获取。
另外，如果想要在路由导航后获取传递的参数值，
可以在目标路由组件中使用`$route.query`和`$route.params`来获取查询参数和路径参数的值。
```
- 通过query
在Web开发中，路由传参是指将数据传递给URL的一种方式，以便在不同的页面或组件之间进行数据交互。以下是几种常见的路由传参方式：
-
查询参数（Query Parameters）：将参数以键值对的形式添加到URL的查询字符串中。例如：
/products?category=shoes&color=blue。在前端可以通过解析URL的查询字符串来获取参数值。 -
路径参数（Path Parameters）：通过在URL中使用占位符来表示参数，并在实际访问时将参数值替换到URL中。例如：
/products/:id，其中:id是路径参数。在前端可以通过路由配置或框架提供的API来获取路径参数的值。 -
查询字符串（Query String）：将参数以键值对的形式添加到URL的查询字符串中，与查询参数类似。不同之处在于查询字符串是通过
?分隔URL和参数的，而查询参数是在路由路径中的。例如：/products?id=123&category=shoes。在前端可以通过解析URL的查询字符串来获取参数值。 -
请求体（Request Body）：在POST、PUT等请求中，可以将参数作为请求体的一部分发送给服务器。参数可以以JSON、表单数据等形式进行编码。在前端可以通过发送HTTP请求并将参数放在请求体中来传递参数。
这些传参方式可以根据具体的应用场景和需求选择使用。在前端开发中，常用的路由库和框架（如React Router、Vue Router）提供了相应的API来处理路由传参。
