vue返回上一頁(后退)的幾種方法與區(qū)別說明
vue返回上一頁(后退)的幾種方法與區(qū)別
案例
從a頁面=>b頁面=>c頁面，當前在c頁面，執(zhí)行某方法后可以如同按了瀏覽器后退鍵一樣返回b頁面
方法
①. 若項目使用vue-router，this.$router.go(-1)可以回到上一頁
②. this.$router.back()
③. window.history.go(-1)
區(qū)別
①與②的區(qū)別是：
go(-1): 原頁面表單中的內(nèi)容會丟失：
- this.$router.go(-1)：后退+刷新；
- this.$router.go(0)：刷新；
- this.$router.go(1)：前進；
back(): 原頁表表單中的內(nèi)容會保留：
- this.$router.back()：后退 ；
- this.$router.back(0)：刷新；
- this.$router.back(1)：前進；
③的區(qū)別是：
history.go(-1)是返回瀏覽器的上一頁，而由于Vue是單頁面應(yīng)用，有的瀏覽器對于hash變更不認為是兩個不同的頁面，在hash模式下就不會跳回瀏覽器上一頁
vue的vue-router中返回上一頁方式
方式1
該方法采用一個整數(shù)作為參數(shù)，表示在歷史堆棧中前進或后退多少步
//原頁面表單中的內(nèi)容會丟失： this.$router.go() // 向前移動一條記錄，與 router.forward() 相同 router.go(1) // 返回一條記錄，與 router.back() 相同 router.go(-1) // 前進 3 條記錄 router.go(3) // 如果沒有那么多記錄，靜默失敗 router.go(-100) router.go(100)
方式2
this.$router.back() back(): 原頁面表單中的內(nèi)容會保留； 1. this.$router.back(-1)：后退； 2. this.$router.back(0)：刷新； 3. this.$router.back(1)：前進；
方式3
編程式導(dǎo)航，點擊后返回指定頁面，指明返回的頁面路徑?？梢允侨我饴窂?/p>
this.$router.push("/company");方式4
window.history.go(-1)
history.go(-1)是返回瀏覽器的上一頁，而由于Vue是單頁面應(yīng)用，有的瀏覽器對于hash變更不認為是兩個不同的頁面，在hash模式下就不會跳回瀏覽器上一頁
其中，在開發(fā)階段，方式一用的是最多的，但是需要注意一點，就是其真的是返回到上一頁，所以有時候達不到我們想要的效果，這時候就可以借助方式三的編程式導(dǎo)航來解決，無論上一頁是什么，點擊返回按鈕都只會跳轉(zhuǎn)到指定的路由。不過最好在路由信息好久不變的情況下使用。省的改來改去的。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue.js購物車添加商品組件的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決
這篇文章主要介紹了Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決,文章通過圖文結(jié)合的方式給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-08-08
el-select 點擊按鈕滾動到選擇框頂部的實現(xiàn)代碼
本文通過實例代碼給大家分享el-select 點擊按鈕滾動到選擇框頂部效果,主要代碼是在visibleChange在這個popper里面找到.el-select-dropdown__list,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要為大家詳細介紹了vue穿梭框?qū)崿F(xiàn)上下移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
在本篇文章里小編給大家整理的是關(guān)于vue的keep-alive用法技巧以及實例代碼，需要的朋友們學習下。2019-08-08
這篇文章主要介紹了Vue使用video.js的代碼詳解,包括在vue腳手架中引入video.js，實例化了視頻.js播放器，并在上銷毀了它，結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue2+element-ui新增編輯表格+刪除行功能,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue請求JSON Server服務(wù)器數(shù)據(jù)的實現(xiàn)方法
這篇文章主要介紹了Vue請求JSON Server服務(wù)器數(shù)據(jù)的實現(xiàn)方法,需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細介紹了vue.js事件循環(huán)機制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了Vue.directive使用注意(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08