vue 禁止瀏覽器後退
阿新 • • 發佈:2019-01-11
需求是:需要某個路由不能通過瀏覽器返回,同時不影響相互之間的切換
原文地址: https://segmentfault.com/q/1010000009527093?sort=created
整理一下解決方法 和 使用方法:
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