vue項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來(lái)的界面
使用$router.go(-1)返回時(shí)刷新原來(lái)的界面
在項(xiàng)目需求中，我們常常需要使用$router.go(-1)返回之前的頁(yè)面，但是卻發(fā)現(xiàn)，之前的界面，保持著上次跳轉(zhuǎn)的狀態(tài)，比如說(shuō)：彈框未關(guān)閉之類的等等，。。。。。
問題如下
界面1 ：
界面2使用$router.go(-1)返回上一次的界面
由于使用$router.go(-1)返回，導(dǎo)致之前的數(shù)據(jù)都保留，并未刷新原來(lái)的界面，如下：還是顯示跳轉(zhuǎn)前的彈框
解決方法1
不要使用$router.go(-1)，而是使用$router.push('某某某'),但是其實(shí)這種方法是不合理的，因?yàn)槟憧赡芴D(zhuǎn)的頁(yè)面是很多頁(yè)面都可能跳轉(zhuǎn)的，所以如果直接使用$router.push('某某某'),雖然可以解決當(dāng)前跳轉(zhuǎn)不刷新的問題，但是會(huì)導(dǎo)致點(diǎn)擊其他頁(yè)面跳轉(zhuǎn)到頁(yè)面2，點(diǎn)擊使用$router.push('某某某'),所謂的返回按鈕，是永遠(yuǎn)跳轉(zhuǎn)到界面1，不符合現(xiàn)實(shí)需求，所以，不推薦使用該方法
解決方法2
在界面1的watch中，對(duì)router進(jìn)行監(jiān)控，當(dāng)router發(fā)生變化時(shí)，初始化界面；
根據(jù)本項(xiàng)目進(jìn)行案例演示：
代碼如下：
界面一彈出框，使用的是使用pop來(lái)控制，顯示的時(shí)候是pop = true,不顯示的是pop = false
之所以使用$router.go(-1)時(shí)彈框未關(guān)閉是因?yàn)閜op還是true,所以使用如下方法解決，當(dāng)router變化的時(shí)候初始化數(shù)據(jù)pop
綜上所述：
解決方法：
watch: {
'$route' () {
// 此處寫router變化時(shí)，想要初始化或者是執(zhí)行的方法......
}
},this.$router.back()與this.$router.go(-1)返回上一頁(yè)的區(qū)別
go(-1): 原頁(yè)面表單中的內(nèi)容會(huì)丟失；
this.$router.go(-1)：后退+刷新；this.$router.go(0)：刷新；this.$router.go(1)：前進(jìn)
back(): 原頁(yè)表表單中的內(nèi)容會(huì)保留；
this.$router.back():后退 ；this.$router.back(0)刷新；this.$router.back(1)：前進(jìn)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- Vue路由跳轉(zhuǎn)傳參或打開新頁(yè)面跳轉(zhuǎn)的方法總結(jié)
- vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法
- Vue3之路由跳轉(zhuǎn)與參數(shù)獲取方式
- Vue路由跳轉(zhuǎn)傳參或者打開新頁(yè)面跳轉(zhuǎn)問題
- vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
- vue如何動(dòng)態(tài)修改$router參數(shù)
- vue中$router.back()和$router.go()的用法
- vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別)
相關(guān)文章
Vue3中reactive變量重新賦值無(wú)法響應(yīng)的3種處理方法
這篇文章主要給大家介紹了關(guān)于Vue3中reactive變量重新賦值無(wú)法響應(yīng)的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個(gè)普通對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象,需要的朋友可以參考下2023-08-08
vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面
這篇文章主要介紹了vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue生命周期與鉤子函數(shù),結(jié)合簡(jiǎn)單實(shí)例形式分析了vue.js生命周期及鉤子函數(shù)相關(guān)流程與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03
在我們的平時(shí)的工作中,在前后端交互的時(shí)候,為了提高頁(yè)面的觀賞性和用戶的體驗(yàn),我們會(huì)在頁(yè)面上添加loading來(lái)阻止用戶操作來(lái)等待接口的返回,這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的控制全局loading顯示的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue-router路由參數(shù)刷新消失的問題解決方法
本篇文章主要介紹了vue-router路由參數(shù)刷新消失的問題解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue項(xiàng)目打包優(yōu)化實(shí)踐指南(推薦!)
如果引入的庫(kù)眾多,那么vendor.js文件體積將會(huì)相當(dāng)?shù)拇?影響首開的體驗(yàn),這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包優(yōu)化實(shí)踐的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue3的ref和reactive的用法和解析,開始部分講解了ref，reactive的使用實(shí)例，如何進(jìn)行類型的標(biāo)注，配合ts這么使用，接著講解了兩者的區(qū)別，分別需要注意的點(diǎn)，還有ref的頂層自動(dòng)解包，需要的朋友可以參考下2023-03-03
Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem)
這篇文章主要介紹了Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家介紹了vue+G6圖形化實(shí)現(xiàn)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07