vue router进行路由跳转并携带参数（params/query）

在使用 `router.push` 进行路由跳转到另一个组件时，可以通过 `params` 或 `query` 来传递参数。

1. 使用 `params` 传参：
 

// 在路由跳转时传递参数
router.push({
name: 'targetComponent',
params: {paramName: paramValue  // 参数名和值}
});

// 在目标组件中通过 $route.params 获取参数值
this.$route.params.paramName

2. 使用 `query` 传参：
 

// 在路由跳转时传递参数
router.push({
name: 'targetComponent',
query: {paramName: paramValue  // 参数名和值}
});

// 在目标组件中通过 $route.query 获取参数值
this.$route.query.paramName

需要注意的是，`params` 传参会将参数添加到 URL 路径中，而 `query` 传参则会将参数添加到 URL 的查询字符串中。根据具体需求选择适合的方式进行参数传递。

二者的区别：

`params` 和 `query` 是 Vue Router 中用于传递参数的两种方式，它们有以下区别：
1. URL 形式：
   – `params` 传参：参数会以占位符的形式添加到 URL 路径中，例如：`/targetComponent/:paramName`
   – `query` 传参：参数会以键值对的形式添加到 URL 的查询字符串中，例如：`/targetComponent?paramName=paramValue`
2. 参数的可见性：
   – `params` 传参：参数在 URL 中不直接暴露，不会修改 URL 路径，适合传递敏感数据。
   – `query` 传参：参数会在 URL 中暴露，可以被查看和修改，适合传递非敏感数据。
3. 参数的传递方式：
   – `params` 传参：参数通过路由的 `params` 属性进行传递，传递的参数是一个对象。
   – `query` 传参：参数通过路由的 `query` 属性进行传递，传递的参数是一个键值对的对象。
4. 路由配置：
   – `params` 传参：需要在路由配置中定义参数的名称，以冒号开头，例如：`path: ‘/targetComponent/:paramName’`
   – `query` 传参：不需要在路由配置中定义参数，可以直接使用。
需要根据具体的需求选择适合的方式进行参数传递。如果参数需要在 URL 中暴露或需要保留在浏览器的历史记录中，可以使用 `params` 传参；如果参数是一些临时的、非敏感的数据，可以使用 `query` 传参。

注意： 如上方举例，如果 paramValue 是一个对象， 跳转完页面后，如果进行页面刷新，会发现取到的值变成了 [object Object]

可以在传递参数时先 JSON.stringify，取值时 JSON.parse 解析

举例：

// 传递时
this.$router.push({
    path: "/screen/project",
    query: {paramName: JSON.stringify(this.paramValue)
    }
});

// 接收时
JSON.parse(this.$route.query.paramName);