亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue router返回到指定的路由的場景分析

 更新時(shí)間:2020年11月10日 11:02:44   作者:網(wǎng)癮頹廢  
這篇文章主要介紹了vue router返回到指定的路由的場景分析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

項(xiàng)目場景:

項(xiàng)目場景:示例:A(商品詳情)——B(商品購買頁面)-C(支付成功頁面)——D(訂單頁面)


問題描述:

提示:這里描述項(xiàng)目中遇到的問題:
如果我們不做控制的話,安卓按照瀏覽器返回機(jī)制,依次從D-C-B-A這樣子,這樣子會有一定的bug,測試那邊也是說不過去啊,原本想利用beforeRouteLeave這個(gè)來操作進(jìn)行更改跳轉(zhuǎn),發(fā)現(xiàn)還是有點(diǎn)問題最后還是用beforeRouteEnter來操作了,先放上兩個(gè)的區(qū)別吧:

這里先介紹一下導(dǎo)航守衛(wèi)

> beforeRouteEnter 離開路由之前執(zhí)行的函數(shù),可用于頁面的反向傳值,頁面跳轉(zhuǎn)
> beforeRouteLeave	進(jìn)入路由之前執(zhí)行的函數(shù),寫在組件里可根據(jù)路由進(jìn)行頁面判斷或傳值

此為具體的描述


原因分析: 錯(cuò)誤寫法沒啥用,repalce就跟沒有用一樣, ```javascript beforeRouteLeave(to, from, next) { if (to.path == "/shopOnline/shopsuccess") { this.$router.replace({ name: "shopOnline" }); next(false); } else { next(); } }, ```

history.pushState(stateObject, title, url);

history.pushState()主要是在不刷新瀏覽器的情況下,創(chuàng)建新的瀏覽記錄并插入瀏覽記錄隊(duì)列中。
1.狀態(tài)對象(stateObject)--stateObject是一個(gè)JavaScript對象,通過pushState方法可以將stateObject內(nèi)容傳遞到新頁面中。
2.標(biāo)題(title)--幾乎沒有瀏覽器支持該參數(shù),但是傳一個(gè)空字符串會比較安全。
3.地址(url)--新的歷史記錄條目的地址(可選,不指定的話則為文檔當(dāng)前URL);瀏覽器在調(diào)用pushState()方法后不會加載該地址;傳入的URL與當(dāng)前URL應(yīng)該是同源的,否則,pushState()會拋出異常

解決方案:

不廢話 我還是直接先貼代碼吧

data(){
return {
 replaceUrl:"" // 記錄你一開始進(jìn)入的頁面
}	
},
// this還不能直接取到
beforeRouteEnter(to, from, next) {
 next(vm => {
 	 //因?yàn)楫?dāng)鉤子執(zhí)行前,組件實(shí)例還沒被創(chuàng)建
  // vm 就是當(dāng)前組件的實(shí)例相當(dāng)于上面的 this,所以在 next 方法里你就可以把 vm 當(dāng) this 來用了。
  console.log(vm);//當(dāng)前組件的實(shí)例
  vm.replaceUrl = from.path;
 });
 },
 mounted() {
  // 掛載完成后,判斷瀏覽器是否支持popstate
  if (window.history && window.history.pushState) {
  history.pushState(null, null, document.URL);
  /*popstate觸發(fā)時(shí)機(jī):當(dāng)前歷史條目為pushState創(chuàng)建時(shí),事件被觸發(fā)*/
  window.addEventListener('popstate', this.goRouteBack, false);
  }
 },
 methods: {
  goRouteBack(){
  // 需要過濾
	  let routerArray = [
	  "/shopOnline/establishOrder",
	  "/shopOnline/shopsuccess"
	  ];
	  if (routerArray.includes(this.replaceUrl)) {
	  //判斷,當(dāng)獲取上個(gè)頁面進(jìn)來的路由是D的時(shí)候,返回到A頁面
	  this.$router.replace({ path: "/shopOnline" });
	  } else {
	  this.$router.replace({ path: "/my" });
	  //判斷,當(dāng)有其他返回值的時(shí)候,返回到默認(rèn)頁面
	  }
		}
},
// 頁面銷毀時(shí),取消監(jiān)聽。否則其他vue路由頁面也會被監(jiān)聽 這個(gè)必須得寫啊!不然來回跳轉(zhuǎn)報(bào)錯(cuò)
 destroyed(){
  window.removeEventListener('popstate', this.goRouteBack, false);
 }

到此這篇關(guān)于vue router返回到指定的路由的場景分析的文章就介紹到這了,更多相關(guān)vue router返回到指定的路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue源碼中要const _toStr = Object.prototype.toString的原因分析

    Vue源碼中要const _toStr = Object.prototype.toString的原因分析

    這篇文章主要介紹了Vue源碼中要const _toStr = Object.prototype.toString的原因分析,在文中給大家提到了Object.prototype.toString方法的原理,需要的朋友可以參考下
    2018-12-12
  • VUE 記賬憑證模塊組件的示例代碼

    VUE 記賬憑證模塊組件的示例代碼

    這篇文章主要介紹了VUE記賬憑證模塊組件的實(shí)例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-03-03
  • Vue如何從1.0遷移到2.0

    Vue如何從1.0遷移到2.0

    這篇文章主要介紹了Vue如何從1.0遷移到2.0的相關(guān)資料,需要的朋友可以參考下
    2017-10-10
  • 詳解vue路由篇(動態(tài)路由、路由嵌套)

    詳解vue路由篇(動態(tài)路由、路由嵌套)

    這篇文章主要介紹了詳解vue路由篇(動態(tài)路由、路由嵌套),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-01-01
  • vuex入門教程,圖文+實(shí)例解析

    vuex入門教程,圖文+實(shí)例解析

    這篇文章主要介紹了vuex入門教程,圖文+實(shí)例解析,具有很好的參考價(jià)值,希望對大家有所幫助。
    2022-03-03
  • 詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件

    詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件

    在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實(shí)例,本文主要為大家詳細(xì)介紹了KeepAlive組件的用法,需要的小伙伴可以參考下
    2023-09-09
  • vue.js中過濾器的使用教程

    vue.js中過濾器的使用教程

    過濾器是一個(gè)通過輸入數(shù)據(jù),能夠及時(shí)對數(shù)據(jù)進(jìn)行處理并返回一個(gè)數(shù)據(jù)結(jié)果的簡單函數(shù)。下面這篇文章主要給大家介紹了關(guān)于vue.js中過濾器使用的相關(guān)資料,需要的朋友可以參考借鑒,下面來看看詳細(xì)的介紹。
    2017-06-06
  • vue中v-model、v-bind和v-on三大指令的區(qū)別詳解

    vue中v-model、v-bind和v-on三大指令的區(qū)別詳解

    v-model和v-bind都是數(shù)據(jù)綁定的方式,下面這篇文章主要給大家介紹了關(guān)于vue中v-model、v-bind和v-on三大指令的區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • vue.js如何在網(wǎng)頁中實(shí)現(xiàn)一個(gè)金屬拋光質(zhì)感的按鈕

    vue.js如何在網(wǎng)頁中實(shí)現(xiàn)一個(gè)金屬拋光質(zhì)感的按鈕

    這篇文章主要給大家介紹了關(guān)于vue.js如何在網(wǎng)頁中實(shí)現(xiàn)一個(gè)金屬拋光質(zhì)感的按鈕的相關(guān)資料,文中給出了詳細(xì)的實(shí)例代碼以及圖文將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • Vue.config.productionTip?=?false?不起作用的問題及解決

    Vue.config.productionTip?=?false?不起作用的問題及解決

    這篇文章主要介紹了Vue.config.productionTip?=?false為什么不起作用,本文給大家分析問題原因解析及解決方案,需要的朋友可以參考下
    2022-11-11

最新評論