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