Vue Router 是 Vue.js 应用中的关键组件，用于管理单页面应用中的路由。它提供了丰富的功能，包括嵌套路由、模块化配置、参数查询、视图过渡和自定义滚动行为等。本文将深入探讨 Vue Router 中传参的两种主要方式：`params` 和 `query`。
1. `params` 参数：
`params` 主要用于动态路由，通过在路径中使用冒号（`:`) 来定义参数。例如，路由 `/router1/:id`，这里的 `id` 就是一个 `params` 参数。当路由被激活时，`id` 的值可以从 `this.$route.params` 中获取。在传递参数时，使用 `this.$router.push()` 方法，并指定 `name` 属性，因为 `params` 只能在通过路由名称引用时传递。例如：
```javascript
this.$router.push({
name: 'openAccount',
params: {
id: id
}
});
```
在接收参数的组件中，可以使用 `this.$route.params.id` 获取 `id` 的值。需要注意的是，如果在 `push` 方法中使用了 `path` 而不是 `name`，`params` 参数将不会生效，可能会导致接收参数时得到 `undefined`。
2. `query` 参数：
`query` 参数则更像 URL 查询字符串，常用于 GET 请求中，它以 `?` 符号开头，如 `/router1?id=123`。传递 `query` 参数时，同样使用 `this.$router.push()`，但需要设置 `query` 属性：
```javascript
this.$router.push({
path: '/openAccount',
query: {
id: id
}
});
```
接收 `query` 参数时，通过 `this.$route.query.id` 即可访问。与 `params` 不同，`query` 参数会显示在浏览器的地址栏中，而 `params` 则不会。
两者的区别在于，`params` 类似于 POST 请求，参数不会在 URL 中显示，而 `query` 类似于 GET 请求，参数会在 URL 显示。因此，对于敏感数据，通常建议使用 `params`，而对于无害的数据或者需要在 URL 中持久化的情况，可以使用 `query`。
在实际应用中，可以通过定义路由配置文件（如 `router.js`）来设置路由规则，如：
```javascript
export default new Router({
routes: [
{ path: '/', name: 'login', component: Login },
{ path: '/register', name: 'register', component: Register }
]
});
```
在组件中，我们可以触发路由跳转并传递参数。以下是一个发送参数的示例：
```html
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="routerTo">click here to news page</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return { msg: 'Welcome to Your Vue.js App' };
},
methods: {
routerTo() {
this.$router.push({ name: 'register', params: { userId: 123 } });
// 或者使用 query 方式
// this.$router.push({ path: '/register', query: { userId: 123 } });
},
},
};
</script>
```
而接收参数的组件中，可以直接访问 `this.$route.params` 或 `this.$route.query`：
```html
<template>
<div>{{ this.$route.params.userId }}</div>
<!-- 或者 -->
<div>{{ this.$route.query.userId }}</div>
</template>
```
总结起来，Vue Router 提供了 `params` 和 `query` 两种方式来传递参数，它们各自有其适用场景。在设计路由和组件交互时，应根据需求选择合适的方式。正确理解和使用这些方法，能帮助开发者更好地管理 Vue 应用的路由和数据传递。
