如何利用vue3把页面点击的内容显示到下一个页面
时间: 2024-05-16 10:16:19 浏览: 20
要实现这个功能,可以使用Vue Router来进行页面之间的导航和传递数据。
首先,在Vue的起始页面中,可以将被点击的内容保存在一个变量中,然后使用Vue Router将用户导航到下一个页面。
例如,我们可以在点击事件中将被点击的内容保存在一个名为`clickedData`的变量中,并使用Vue Router将用户导航到下一个页面:
```
<template>
<div>
<button @click="handleClick">点击我</button>
</div>
</template>
<script>
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
let clickedData = ''
function handleClick() {
// 将被点击的内容保存在 clickedData 中
clickedData = '这是被点击的内容'
// 使用 Vue Router 导航到下一个页面,并传递 clickedData 变量
router.push({ path: '/nextPage', query: { clickedData }})
}
return {
handleClick
}
}
}
</script>
```
然后,在下一个页面中,可以使用`this.$route.query`来获取传递过来的数据,并将其显示在页面上。
例如,我们可以在下一个页面的模板中使用一个`<p>`元素来显示传递过来的数据:
```
<template>
<div>
<p>{{ clickedData }}</p>
</div>
</template>
<script>
export default {
computed: {
clickedData() {
// 从路由中获取传递过来的 clickedData 变量
return this.$route.query.clickedData
}
}
}
</script>
```
这样,当用户在第一个页面中点击按钮之后,就会被导航到下一个页面,并且被点击的内容会显示在下一个页面上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)