vue項(xiàng)目使用$router.go(-1)返回時(shí)刷新原來(lái)的界面操作
在項(xiàng)目需求中,我們常常需要使用$router.go(-1)返回之前的頁(yè)面,但是卻發(fā)現(xiàn),之前的界面,保持著上次跳轉(zhuǎn)的狀態(tài),比如說(shuō):彈框未關(guān)閉之類的等等,。。。。。
問(wè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)不刷新的問(wè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' () { // 此處寫(xiě)router變化時(shí),想要初始化或者是執(zhí)行的方法...... } },
以上這篇vue項(xiàng)目使用$router.go(-1)返回時(shí)刷新原來(lái)的界面操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳)
這篇文章主要介紹了詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置
這篇文章主要介紹了詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02vue.nextTick()與setTimeout的區(qū)別及說(shuō)明
這篇文章主要介紹了vue.nextTick()與setTimeout的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue實(shí)現(xiàn)將一個(gè)數(shù)組內(nèi)的相同數(shù)據(jù)進(jìn)行合并
今天小編就為大家分享一篇vue實(shí)現(xiàn)將一個(gè)數(shù)組內(nèi)的相同數(shù)據(jù)進(jìn)行合并,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue 使用 echarts 繪制中國(guó)地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 使用 echarts 繪制中國(guó)地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-01-01vue使用keep-alive如何實(shí)現(xiàn)多頁(yè)簽并支持強(qiáng)制刷新
這篇文章主要介紹了vue使用keep-alive如何實(shí)現(xiàn)多頁(yè)簽并支持強(qiáng)制刷新,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue進(jìn)入頁(yè)面時(shí)不在頂部,檢測(cè)滾動(dòng)返回頂部按鈕問(wèn)題及解決方法
這篇文章主要介紹了vue進(jìn)入頁(yè)面時(shí)不在頂部,檢測(cè)滾動(dòng)返回頂部按鈕問(wèn)題及解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10