基于vue写一个点击事件跳转页面并传参
时间: 2024-02-07 07:03:25 浏览: 25
假设你要跳转到目标页面 target.vue,并传递参数 id 和 name,可以按照以下步骤进行编写:
1. 在目标页面 target.vue 中,通过 $route 对象获取传递的参数:
```
<template>
<div>
<p>id: {{ $route.query.id }}</p>
<p>name: {{ $route.query.name }}</p>
</div>
</template>
```
2. 在源页面中,通过 router-link 或者普通的按钮绑定点击事件,跳转到目标页面:
```
<template>
<div>
<button @click="goToTarget">跳转到目标页面</button>
</div>
</template>
<script>
export default {
methods: {
goToTarget() {
this.$router.push({
path: '/target',
query: {
id: '123',
name: '张三'
}
})
}
}
}
</script>
```
在这个例子中,我们使用了 $router.push() 方法来跳转页面,并通过 query 参数传递了 id 和 name 两个参数。在目标页面中,我们通过 $route.query 获取了这两个参数,并进行了展示。
注意:为了能够使用 $router 和 $route 对象,你需要在 Vue 中配置路由,具体方法可以参考官方文档。