Vue路由this.route.push跳轉頁面不刷新怎么辦

本篇內容主要講解“Vue路由this.route.push跳轉頁面不刷新怎么辦”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue路由this.route.push跳轉頁面不刷新怎么辦”吧!

Vue路由this.route.push跳轉頁面不刷新

一、背景

介紹：在vue項目開發中，使用路由進行頁面跳轉時，路由所跳轉的頁面不進行刷新。

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

案例：

A頁面：

B頁面：

問題：

當在A頁面第一點擊按鈕到B頁面時，一切正常，當返回到A頁面再次點擊按鈕時，B頁面沒有執行mounted鉤子函數，結果導致mounted函數中查詢方法不執行。

二、解決方法：

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

2、監聽路由

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

// 該方法會多一次請求
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搭配刷新參數會消失

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

path和query搭配，刷新頁面參數不會消失，query中參數成了url中的一部分。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

到此，相信大家對“Vue路由this.route.push跳轉頁面不刷新怎么辦”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！