vue router.push同一页面不刷新问题

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