vue带参跳转页面并赋值
时间: 2023-07-26 12:27:26 浏览: 115
在 Vue 中,我们可以通过 `$router.push` 方法进行路由跳转,并通过 `params` 或 `query` 传递参数。
假设我们要跳转到名为 `detail` 的路由,并且需要传递一个名为 `id` 的参数,可以这样写:
```javascript
this.$router.push({
name: 'detail',
params: {
id: 123
}
})
```
在接收参数的页面中,可以通过 `$route.params` 获取传递过来的参数,比如:
```javascript
export default {
created() {
console.log(this.$route.params.id) // 输出 123
}
}
```
如果要在跳转时传递多个参数,可以在 `params` 对象中添加多个属性。
如果需要通过 `query` 传递参数,可以将 `params` 改为 `query`,并将参数作为键值对传递,例如:
```javascript
this.$router.push({
name: 'detail',
query: {
id: 123,
name: 'vue'
}
})
```
在接收参数的页面中,可以通过 `$route.query` 获取传递过来的参数,比如:
```javascript
export default {
created() {
console.log(this.$route.query.id) // 输出 123
console.log(this.$route.query.name) // 输出 vue
}
}
```
希望能对您有所帮助。
阅读全文