vue router.push同一页面不刷新问题
vue router.push同一页面同一页面不刷新问题问题描述在做搜索框时,每次根据搜索结果展示搜索内容,但是每次router都是一样的,只是参数不一样,直接使用router.push,第二次搜索后页面就不会响应搜索内容。解决方法:在搜索页面设置watch监听搜索的参数变化。搜索框代码method:{async handleSearch(){searchTool(param).then(res=
·
vue router.push同一页面不刷新问题
问题描述
在做搜索框时,每次根据搜索结果展示搜索内容,但是每次router都是一样的,只是参数不一样,直接使用router.push,第二次搜索后页面就不会响应搜索内容。
解决方法:
在搜索页面设置watch监听搜索的参数变化。
搜索框代码
method:{
async handleSearch(){
searchTool(param).then(res=>{
this.$router.push({name:'all',query:{keyword:this.search}})
this.search=''
})
}
}
keyword是向搜索页面传的参数,search是搜索的内容,name对应跳转页面的name,searchTool和param是自己封装的接口和参数。
然后再搜索界面通过this.$route.query.keyword接收这个参数,查询内容。
查询页面代码
watch:{
//监听route
$route:{
handler(){
//接收搜索框传的值
this.keyword=this.$route.query.keyword
if(this.keyword)
{
//不为空按照搜索条件查询
this.getSearchList()
}
else
{
//空值查询全部
this.getAllList()
}
},
immediate:true
}
}
getSearchList和getAllList是自己封装的函数,根据自己内容进行调整。
immediate
当父组件向子组件动态传值时,子组件首次获取到父组件传来的默认值时,也需要执行函数,就要将immediate设置为true
更多推荐
已为社区贡献2条内容
所有评论(0)