vue3点击搜索将搜索框的值传到次搜索框并搜索,跳转的时候把输入内容作为参数传递到跳转页,跳转页加载的时候接收传递参数并执行搜索方法
时间: 2024-02-16 11:04:57 浏览: 18
在 Vue3 中,可以通过以下步骤实现:
1. 在搜索框中绑定一个变量,例如 `searchText`,并在点击搜索按钮时触发一个方法,例如 `search`:
```html
<template>
<div>
<input type="text" v-model="searchText" />
<button @click="search">搜索</button>
</div>
</template>
<script>
import { useRouter } from 'vue-router'
export default {
data() {
return {
searchText: ''
}
},
setup() {
const router = useRouter()
const search = () => {
// 传递搜索框的值到下一页并跳转
router.push({
path: '/search',
query: {
keyword: this.searchText
}
})
// 执行搜索方法
doSearch()
}
const doSearch = () => {
// 执行搜索逻辑
}
return {
search,
doSearch
}
}
}
</script>
```
2. 在路由配置中添加一个带参数的路由,例如 `/search`:
```javascript
{
path: '/search',
name: 'Search',
component: SearchPage
}
```
3. 在搜索结果页面的 setup 函数中获取传递的参数并执行搜索方法:
```html
<template>
<div>
<h1>搜索结果</h1>
</div>
</template>
<script>
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
const doSearch = (keyword) => {
// 执行搜索逻辑
}
// 获取传递的参数
const keyword = route.query.keyword
// 执行搜索方法
doSearch(keyword)
return {
doSearch
}
}
}
</script>
```