Vue 禁用瀏覽器的前進後退操作
一.禁用前進後退功能
在開發vue應用中,如何禁用瀏覽器的前進後退功能呢?
網上搜到的答案基本如下:
history.pushState(null,null,document.URL) window.addEventListener('popstate',function() { history.pushState(null,document.URL) })
但應該放在哪兒?
經過嘗試,我是如此寫的:
main.js中,增加popstate監聽
window.addEventListener('popstate',document.URL) })
router的index.js中:
const router = new Router({ mode: 'hash',routes,scrollBehavior: () => { history.pushState(null,document.URL) } })
這裡我將pushState放在了scrollBehavior中。當然,你也可以嘗試放在router的beforeEach/afterEach中
router.afterEach((to,from) => { history.pushState(null,location.protocol + '//' + location.host + '/#' + to.path) })
不過這裡的URL就不能使用document.URL了,因為此時的 document.URL 指向的是上一頁面的 URL,這會導致第一次頁面回退禁用無效。
二、history
history 物件包含瀏覽器歷史。
常見屬性/方法:
history.length - 屬性儲存著歷史記錄的URL數量;
history.back() - 等同於在瀏覽器點選後退按鈕;
history.forward() - 等同於在瀏覽器中點選前進按鈕;
history.go() - 載入 history 列表中的某個具體頁面。
H5新增了屬性/方法/事件:
history.state - 屬性用來儲存記錄物件;
history.pushState() - 向瀏覽器的歷史記錄中新增一個狀態;
history.replaceState() - 修改當前歷史記錄實體;
popstate事件 - 當活動歷史記錄條目更改時,將觸發
1.history.state
返回當前頁面的state物件
2.history.pushState(state,title,url)
state: 狀態物件可以是任何可以序列化的物件。
title: 當前大多數瀏覽器都忽略此引數,儘管將來可能會使用它。
url: 新歷史記錄條目的URL由此引數指定。如果未指定此引數,則將其設定為文件的當前URL。
3.history.replaceState(state,url)
修改當前歷史記錄實體,如果你想更新當前的state物件或者當前歷史實體的URL來響應使用者的的動作的話這個方法將會非常有用。
引數與pushState類似。
4.popstate事件
當活動歷史記錄條目更改時,將觸發popstate事件。
需要注意的是呼叫history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時,才會觸發該事件,如使用者點選瀏覽器的回退按鈕(或者在Javascript程式碼中呼叫history.back()或者history.forward()方法)。
不同的瀏覽器在載入頁面時處理popstate事件的形式存在差異。頁面載入時Chrome和Safari通常會觸發(emit )popstate事件,但Firefox則不會。
補充知識:vue實現前進重新整理,後退不重新整理心得
最近在用vue做移動端的專案。希望實現前進重新整理、後退不重新整理的效果。即載入過的介面能快取起來(返回不用重新載入),關閉的介面能被銷燬掉(再進入時重新載入)。例如對a->b 前進(b)重新整理,b->a 後退(a)不重新整理。
需求:
預設顯示 A
B 跳到 A,A 不重新整理
C 跳到 A,A 重新整理
實現方式:
在 A 路由裡面設定 meta 屬性
在 B 元件裡面設定 beforeRouteLeave:
vue新手注意:在App.vue中配置快取的檢視元件
在 C 元件裡面設定 beforeRouteLeave:
以上這篇Vue 禁用瀏覽器的前進後退操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。