1. 程式人生 > >vue 禁止瀏覽器後退

vue 禁止瀏覽器後退

需求是:需要某個路由不能通過瀏覽器返回,同時不影響相互之間的切換

整理一下解決方法 和 使用方法:

1.在路由配置中給這個路由新增meta資訊,比如:

{
    path: '/home',
    component: xxx,
    meta: {allowBack: false}
}
2.在全域性的router.beforeEach 函式裡面獲取allowBack的狀態,同時更新vuex的allowBack的值,如:
let allowBack = true    //    給個預設值true
if (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有點不同
-----更新分割線-----
location.href 獲取的仍不是to的地址,所以得根據to的資訊來拼起來

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

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

原文地址: https://segmentfault.com/q/1010000009527093?sort=created