通过this.$router.push跳转传值,并在对应的页面取值
时间: 2023-10-17 16:18:33 浏览: 51
可以通过 `this.$router.push` 的 `query` 参数来进行传值。具体步骤如下:
1.在跳转时,通过 `query` 参数传递数据。例如:
```js
this.$router.push({
path: '/target-page',
query: {
key1: 'value1',
key2: 'value2'
}
})
```
2.在接收页面,通过 `$route.query` 获取传递的参数。例如:
```js
mounted() {
const { key1, key2 } = this.$route.query
console.log(key1, key2)
}
```
这样就可以在接收页面中获取到传递的参数了。需要注意的是,传递的参数会在 URL 中显示,因此不适合传递敏感信息。如果需要传递敏感信息,可以考虑使用 Vuex 或其他状态管理工具。
相关问题
this.$router.push怎样传值
您可以使用路由的 query 或 params 参数来传递值给目标路由。下面是两种不同的方法:
1. 使用 query 参数传值:
```javascript
this.$router.push({
path: '/target',
query: { key: value }
});
```
在目标路由中,您可以通过 `this.$route.query` 来获取传递的值。
2. 使用 params 参数传值:
```javascript
this.$router.push({
name: 'target',
params: { key: value }
});
```
在目标路由中,您可以通过 `this.$route.params` 来获取传递的值。
请注意,使用 params 参数传递值时,需要在路由配置中定义对应的参数名。例如,在路由配置中定义了 `name: 'target'`,则需要在目标路由的路径中添加参数占位符,如 `/target/:key`。
this.$router.push跳转页面后并刷新页面
在 Vue.js 中,`this.$router.push` 方法会进行页面的跳转,但不会刷新页面。如果你希望在页面跳转后刷新页面,可以考虑使用以下方法:
1. 通过给 `this.$router.push` 方法传递一个新的 `key` 参数来实现强制刷新。例如:
```javascript
this.$router.push({
path: '/your-path',
query: { key: Math.random() }
});
```
在目标页面中,可以通过 `this.$route.query.key` 获取到 `key` 的值,并在页面的某个地方使用该值,触发页面重新渲染。
2. 使用 `window.location.reload()` 方法来刷新页面。在跳转完成后,可以手动调用该方法来刷新当前页面。例如:
```javascript
this.$router.push('/your-path').then(() => {
window.location.reload();
});
```
注意,这种方式会刷新整个页面,可能导致数据丢