當(dāng)前頁面有四個按鈕，每個按鈕跳轉(zhuǎn)的頁面都是自己本身，只不過內(nèi)容不一樣。（需要調(diào)用后端api查詢方法）

使用vue祖?zhèn)鞯膒ush()方法來挑轉(zhuǎn)的話，你會發(fā)現(xiàn)可以跳轉(zhuǎn)過去，但是頁面會刷新。不會觸發(fā)vue生命周期函數(shù)。

解決辦法：三種方式自己看需要使用。

方式一：

this.$router.replace({ path: '/case-detail', query: { caseId: this.detailInfo.parentId } }) this.caseFan() //添加頁面初始化獲取數(shù)據(jù)的方法 這樣子可以就實現(xiàn)了頁面跳轉(zhuǎn) 而且是新的數(shù)據(jù)。但是有一個問題，但我們點擊返回 是想返回上一個詳情頁.這樣子頁面棧丟失了返回不到上一個案件詳情了

方式二：

let newUrl = this.$router.resolve({path: "/case-detail",query: {caseId: this.detailInfo.parentId,},});window.open(newUrl.href, "_self");使用a鏈接的跳轉(zhuǎn)方式，去跳轉(zhuǎn) ，測試發(fā)現(xiàn)不能使用 _self屬性 在當(dāng)前頁面打開，也是地址欄變化，不會刷新，可能也需要添加初始化的方法去收取數(shù)據(jù)；以及一些其他屬性 ： _blank 打開新的頁面是執(zhí)行vue的生命周期 ，想想也是一個新的頁面肯定會執(zhí)行一次。

方式三：監(jiān)聽路由

watch: {$route() {//監(jiān)聽相同路由下參數(shù)變化的時候，從而實現(xiàn)異步刷新// this.loading = true;//重新獲取數(shù)據(jù)this.caseFan();},},

總結(jié)

以上是生活随笔為你收集整理的vue本页面跳转不刷新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。