Solve the problem that the VUE routing query or params parameters are updated but the component page data is not refreshed

Description of the problem:
When the current route is displayed, if you jump to different parameters of the same route, the parameters will change and the page will not be refreshed. For example:


// 使用query参数========

当前路由:http://localhost:8080/user?id=1

目标路由:http://localhost:8080/user?id=2

// 使用params参数========

当前路由:http://localhost:8080/user/1

目标路由:http://localhost:8080/user/2

可以看到query或params参数在地址栏id变化,但是页面未刷新

This happens because the route-dependent query or params parameter acquisition is written in the created life cycle, because the relationship between the same route loaded twice or even multiple times has not reached the monitoring, exiting the
page and entering another article page will not run the created component The life cycle causes the article data to be the data entered for the first time.

Solution:
watch to monitor whether the route changes, if the parameters are not the same, reload the data and update the view:


watch: {
    
    
	// 监听路由是否变化
	'$route' (to, from) {
    
     
		if(to.query.id != from.query.id){
    
    
		    this.id = to.query.id; // 把最新id赋值给定义在data中的id
			this.init(); // 重新调用加载数据方法
		}
	}
},

Guess you like

Origin blog.csdn.net/weixin_44248187/article/details/124320828