Solution for Vue routing this.route.push jump page not refreshing

Vue routing this.route.push jump page does not refresh

1. Background

Introduction: In the development of Vue projects, when using routing to jump to a page, the page to which the routing jumps is not refreshed.

That is, the vue life cycle function is not executed (created, mounted hook functions).

Examples:

Page A:

Page B:

question:

When you first click the button on page A to go to page B, everything is normal. When you return to page A and click the button again, page B does not execute the mounted hook function, resulting in the query method in the mounted function not being executed.

2. Solution:

1. Use the activated:{} periodic function instead of the mounted:{} function.

2. Monitoring Routes

// Not recommended, poor user experiencewatch: {
	'$route' (to, from) {
    // The page refreshes when the route changes this.$router.go(0);
		}
},

// This method will request watch once more: {
	'$route' (to, from) {
    // The method executed in the mounted function, put it here this.qBankId = globalVariable.questionBankId;
	this.qBankName = globalVariable.questionBankTitle;
	this.searchCharpter();
	}
},

Vue this.$router.push route jump, refresh parameters disappear

this.$router.push({name:"",params:{id:""}})

name and params will disappear when refresh parameters are matched

this.$router.push({path:"",query:{id:""}})

Path and query are used together. The parameters will not disappear when the page is refreshed. The parameters in the query become part of the URL.

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.