国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

javascript - vue單頁應用阻止瀏覽器后退?

瀏覽:108日期:2023-02-21 10:20:09

問題描述

web app 單頁應用,是用vue vue-router寫的。

有些頁面是需要禁止后退的,我把當前頁面是否能后退寫在了路由元信息meta里面,比如為allowBack。

查到資料 禁止后退的方法是 history.pushState(null, null, location.href)

之前項目用的是vue1.0,解決方法是

1. 在全局的router.beforeEach 里面 判斷當前路由的handler里面的allowBack變量是否為false2. 如果為false 則 history.pushState(null, null, location.href)

現(xiàn)在改用vue2.0, 原來的方法不好使了,

現(xiàn)在的問題是,不知道該把 history.pushState(null, null, location.href) 這段代碼放在哪 或者說 各位大神 有沒有什么其他的解決方案? 謝謝!!

其實主要的使用場景是這樣的, tabbar點擊切換到不同的頁面,假如我現(xiàn)在在a頁面,點擊tabbar到b頁面,我不能通過返回鍵回到a頁面,但是能通過點擊tabbar去到a頁面 javascript - vue單頁應用阻止瀏覽器后退?

問題解答

回答1:

自問自答.....需求是:需要某個路由不能通過瀏覽器返回,同時不影響相互之間的切換整理一下解決方法 和 使用方法:

1.在路由配置中給這個路由添加meta信息,比如:

{ path: ’/home’, component: xxx, meta: {allowBack: false}}

2.在全局的router.beforeEach 函數(shù)里面獲取allowBack的狀態(tài),同時更新vuex的allowBack的值,如:

let allowBack = true // 給個默認值trueif (to.meta.allowBack !== undefined) { allowBack = to.meta.allowBack if (!allowBack) {history.pushState(null, null, location.href) }} store.dispatch(’updateAppSetting’, { allowBack: allowBack})

這段代碼得寫在next()的后面,因為寫在next()前面location.href并不是to的地址,這點跟vue1.0有點不同

3.接下來就是最核心的了,在app.vue的mounted里面注冊onpopstate事件:

window.onpopstate = () => { if (!this.allowBack) { // 這個allowBack 是存在vuex里面的變量history.go(1) }}

去掉history.pushState(null, null, location.href) 也能防止后退,但是組件會重新渲染,所以這部分也很關鍵

回答2:

試試這樣看看

//改寫返回函數(shù),返回的時候就會觸發(fā)這個,//你也可以直接監(jiān)聽瀏覽器的返回事件,定義一個變量就行了,邏輯跟這個差不多Router.prototype.goBack = function () { this.isBack = true window.history.go(-1)}//假如當前頁面是b頁面,是由a頁面點擊過來的,現(xiàn)在b頁面點擊返回鍵,不能返回到a頁面router.beforeEach( (to, from, next) => { //一當點擊返回鍵,那么to就是a頁面,from就是b頁面 if(!from.meta.allowBack){//進行頁面判斷,取出history里面之前的url,對這個url進行判斷,看他等不等于to這個頁面//因為安全原因,js沒法獲取history里的url,或者獲取麻煩,所以你就要自己來記住url//就是每進入一個頁面,你都去把之前的頁面路徑存在sessionStorage中//···判斷過程省略//這里取出,然后對比就可以了//如果等于的話,直接禁止//取出結果var path = sessionStorage.getItem(’path’);//這個this我沒有實驗,應是指向router if(path == to.path && this.isBack){ //什么都不做,只要不執(zhí)行next方法,路由是不會跳的 this.isBack = false; } else { //否則的話,就代表不是點擊的返回鍵,該跳轉就跳轉 //這里也存儲 sessionStorage.setItem(’path’,from.path); this.isBack = false; next() } }else{//在這里存儲sessionStorage.setItem(’path’,from.path);this.isBack = false;next(); }});

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 久草视频免费在线观看 | 国产欧美日韩在线人成aaaa | 精品一区二区三区在线播放 | 国产精品亚洲精品影院 | 欧美精品在欧美一区二区 | 黄在线看| 在线不卡国产 | 国产真实乱子伦精品视手机观看 | 黄网站www | 在线观看亚洲成人 | 亚洲国产一区在线二区三区 | 中文字幕毛片 | 国产不卡在线播放 | 国产夫妻视频 | 亚洲国产欧美日韩精品一区二区三区 | 普通话对白国产情侣自啪 | 国产午夜精品不卡观看 | 国产一级久久久久久毛片 | 久久国产亚洲 | 国产精品二区在线 | 伊人久色 | 男女那个视频免费 | 性做爰片免费视频毛片中文i | 美女免费毛片 | 一级做a爱过程免费视频时看 | 国内精品七七久久影院 | 日p免费视频 | 色久网站 | 91精品成人免费国产片 | 一区二区三区视频网站 | 伊人不卡| 久久成人国产精品 | 毛片免费的 | 成人小视频在线播放 | 一级网站在线观看 | 久久亚洲国产精品一区二区 | 欧美另类视频一区二区三区 | 免费亚洲黄色 | 美女福利视频午夜在线 | 久久99亚洲精品久久频 | 日本在线观看一级高清片 |