Vue路由this.route.push跳轉頁(yè)面不刷新的解決方案

Vue路由this.route.push跳轉頁(yè)面不刷新

一、背景

介紹：在vue項目開(kāi)發(fā)中，使用路由進(jìn)行頁(yè)面跳轉時(shí)，路由所跳轉的頁(yè)面不進(jìn)行刷新。

也就是vue生命周期函數沒(méi)有執行(created、mounted鉤子函數)。

案例：

A頁(yè)面：

B頁(yè)面：

問(wèn)題：

當在A(yíng)頁(yè)面第一點(diǎn)擊按鈕到B頁(yè)面時(shí)，一切正常，當返回到A頁(yè)面再次點(diǎn)擊按鈕時(shí)，B頁(yè)面沒(méi)有執行mounted鉤子函數，結果導致mounted函數中查詢(xún)方法不執行。

二、解決方法：

1、使用activated:{}周期函數代替mounted:{}函數即可。

2、監聽(tīng)路由

// 不推薦、用戶(hù)體驗不好
watch: {
	'$route' (to, from) {
    // 路由發(fā)生變化頁(yè)面刷新
	this.$router.go(0);
		}
},

// 該方法會(huì )多一次請求
watch: {
	'$route' (to, from) {
    // 在mounted函數執行的方法，放到該處
	this.qBankId = globalVariable.questionBankId;
	this.qBankName = globalVariable.questionBankTitle;
	this.searchCharpter();
	}
},

Vue this.$router.push路由跳轉,刷新參數消失

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

name和params搭配刷新參數會(huì )消失

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

path和query搭配，刷新頁(yè)面參數不會(huì )消失，query中參數成了url中的一部分

以上為個(gè)人經(jīng)驗，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。