一.禁用前進(jìn)后退功能

在開發(fā)vue應(yīng)用中，如何禁用瀏覽器的前進(jìn)后退功能呢？

網(wǎng)上搜到的答案基本如下：

history.pushState(null, null, document.URL)window.addEventListener(’popstate’, function() { history.pushState(null, null, document.URL)})

但應(yīng)該放在哪兒？

經(jīng)過嘗試，我是如此寫的：

main.js中，增加popstate監(jiān)聽

window.addEventListener(’popstate’, function() { history.pushState(null, null, document.URL)})

router的index.js中：

const router = new Router({ mode: ’hash’, routes, scrollBehavior: () => { history.pushState(null, null, document.URL) }})

這里我將pushState放在了scrollBehavior中。當(dāng)然，你也可以嘗試放在router的beforeEach/afterEach中

router.afterEach((to, from) => { history.pushState(null, null, location.protocol + ’//’ + location.host + ’/#’ + to.path)})

不過這里的URL就不能使用document.URL了，因?yàn)榇藭r(shí)的 document.URL 指向的是上一頁面的 URL，這會(huì)導(dǎo)致第一次頁面回退禁用無效。

二、history

history 對(duì)象包含瀏覽器歷史。

常見屬性/方法：

history.length - 屬性保存著歷史記錄的URL數(shù)量；

history.back() - 等同于在瀏覽器點(diǎn)擊后退按鈕；

history.forward() - 等同于在瀏覽器中點(diǎn)擊前進(jìn)按鈕；

history.go() - 加載 history 列表中的某個(gè)具體頁面。

H5新增了屬性/方法/事件：

history.state - 屬性用來保存記錄對(duì)象；

history.pushState() - 向?yàn)g覽器的歷史記錄中添加一個(gè)狀態(tài)；

history.replaceState() - 修改當(dāng)前歷史記錄實(shí)體；

popstate事件 - 當(dāng)活動(dòng)歷史記錄條目更改時(shí)，將觸發(fā)

1.history.state

返回當(dāng)前頁面的state對(duì)象

2.history.pushState(state, title, url)

state: 狀態(tài)對(duì)象可以是任何可以序列化的對(duì)象。

title: 當(dāng)前大多數(shù)瀏覽器都忽略此參數(shù)，盡管將來可能會(huì)使用它。

url: 新歷史記錄條目的URL由此參數(shù)指定。如果未指定此參數(shù)，則將其設(shè)置為文檔的當(dāng)前URL。

3.history.replaceState(state, title, url)

修改當(dāng)前歷史記錄實(shí)體，如果你想更新當(dāng)前的state對(duì)象或者當(dāng)前歷史實(shí)體的URL來響應(yīng)用戶的的動(dòng)作的話這個(gè)方法將會(huì)非常有用。

參數(shù)與pushState類似。

4.popstate事件

當(dāng)活動(dòng)歷史記錄條目更改時(shí)，將觸發(fā)popstate事件。

需要注意的是調(diào)用history.pushState()或history.replaceState()不會(huì)觸發(fā)popstate事件。只有在做出瀏覽器動(dòng)作時(shí)，才會(huì)觸發(fā)該事件，如用戶點(diǎn)擊瀏覽器的回退按鈕（或者在Javascript代碼中調(diào)用history.back()或者h(yuǎn)istory.forward()方法）。

不同的瀏覽器在加載頁面時(shí)處理popstate事件的形式存在差異。頁面加載時(shí)Chrome和Safari通常會(huì)觸發(fā)(emit )popstate事件，但Firefox則不會(huì)。

補(bǔ)充知識(shí)：vue實(shí)現(xiàn)前進(jìn)刷新，后退不刷新心得

最近在用vue做移動(dòng)端的項(xiàng)目。希望實(shí)現(xiàn)前進(jìn)刷新、后退不刷新的效果。即加載過的界面能緩存起來（返回不用重新加載），關(guān)閉的界面能被銷毀掉（再進(jìn)入時(shí)重新加載）。例如對(duì)a->b 前進(jìn)（b）刷新，b->a 后退（a）不刷新。

需求：

默認(rèn)顯示 A

B 跳到 A，A 不刷新

C 跳到 A，A 刷新

實(shí)現(xiàn)方式：

在 A 路由里面設(shè)置 meta 屬性

在 B 組件里面設(shè)置 beforeRouteLeave：

vue新手注意：在App.vue中配置緩存的視圖組件

在 C 組件里面設(shè)置 beforeRouteLeave：

以上這篇Vue 禁用瀏覽器的前進(jìn)后退操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。