問(wèn)題描述

web app 單頁(yè)應(yīng)用，是用vue vue-router寫(xiě)的。

有些頁(yè)面是需要禁止后退的，我把當(dāng)前頁(yè)面是否能后退寫(xiě)在了路由元信息meta里面，比如為allowBack。

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

之前項(xiàng)目用的是vue1.0，解決方法是

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

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

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

其實(shí)主要的使用場(chǎng)景是這樣的， tabbar點(diǎn)擊切換到不同的頁(yè)面，假如我現(xiàn)在在a頁(yè)面，點(diǎn)擊tabbar到b頁(yè)面，我不能通過(guò)返回鍵回到a頁(yè)面，但是能通過(guò)點(diǎn)擊tabbar去到a頁(yè)面

問(wèn)題解答

自問(wèn)自答.....需求是：需要某個(gè)路由不能通過(guò)瀏覽器返回，同時(shí)不影響相互之間的切換整理一下解決方法 和 使用方法：

1.在路由配置中給這個(gè)路由添加meta信息，比如:

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

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

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

這段代碼得寫(xiě)在next()的后面，因?yàn)閷?xiě)在next()前面location.href并不是to的地址，這點(diǎn)跟vue1.0有點(diǎn)不同

3.接下來(lái)就是最核心的了，在app.vue的mounted里面注冊(cè)onpopstate事件：

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

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

試試這樣看看

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