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

Logo

前往低代码交流专区

更多推荐