快捷導(dǎo)航

在VUE3中禁止網(wǎng)頁返回到上一頁的方法

更新時(shí)間：2023年09月14日 14:28:06 作者：專業(yè)研究祖?zhèn)鰾ug編寫術(shù)

這篇文章主要介紹了在VUE3中如何禁止網(wǎng)頁返回到上一頁,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

第一種：監(jiān)聽返回事件

使用返回監(jiān)聽事件，在用戶點(diǎn)擊返回按鈕的時(shí)候觸發(fā)，觸發(fā)后使用window.history.forward()回到下一頁。

代碼如下：

&lt;script language="javascript"&gt;
window.addEventListener('popstate', function () {
window.history.forward();
});
&lt;/script&gt;

這種方法無法阻止瀏覽器返回到上一頁，所以就會(huì)導(dǎo)致頁面會(huì)出現(xiàn)閃一下的情況，故不推薦使用這種方法。

第二種：在頁面中修改歷史記錄

使用history.pushState()方法將當(dāng)前URL添加到瀏覽器歷史記錄中，從而覆蓋上一頁的URL。

我們把參數(shù)設(shè)置為空，就相當(dāng)于把上一頁的記錄清除了，就可以實(shí)現(xiàn)無法返回到上一頁的目的。

例如，在Vue 3應(yīng)用程序的created生命周期或setup語法的onMounted中添加history.pushState(null, null, location.href);

代碼如下：

&lt;script setup&gt;
onMounted(()=&gt;{
history.pushState(null, null, location.href);
})
&lt;/script&gt;

這種方法就不會(huì)有閃一下的現(xiàn)象，但如果在多頁面的應(yīng)用中，你會(huì)發(fā)現(xiàn)，使用這種方法只能在當(dāng)前頁面生效。

第三種：在路由中修改歷史記錄

在路由的afterEach中清除上一頁數(shù)據(jù)讓路由無法跳轉(zhuǎn)，從而實(shí)現(xiàn)禁止網(wǎng)頁返回到上一頁的目的。

注意：

history.pushState(null, null, location.href)不要添加到了beforeEach中，在這里添加起不到作用。因?yàn)檫@是在跳轉(zhuǎn)之前執(zhí)行，這個(gè)時(shí)候路由還能拿到上一頁數(shù)據(jù)，從而完成跳轉(zhuǎn)到下一頁。

例如，在router.js中添加以下代碼：

import { createRouter,createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes:[
{
name: 'test1',
path:'/test1',
component:() =&gt; import('../components/test1.vue'),
},
{
name:'test2',
path:'/test2',
component:() =&gt; import('../components/test2.vue')
}
]
})
// 每次進(jìn)行路由跳轉(zhuǎn)時(shí)都會(huì)執(zhí)行
router.beforeEach(function(to,from,next){
// 注意寫在此處起不到禁用返回的功能，因?yàn)檫@是在跳轉(zhuǎn)前執(zhí)行，路由還能拿到跳轉(zhuǎn)之前的上一頁數(shù)據(jù)
})
// 進(jìn)行路由跳轉(zhuǎn)后執(zhí)行
router.afterEach(function(to,from){
// 跳轉(zhuǎn)后清除一下上一頁的數(shù)據(jù)
history.pushState(null, null, location.href);
})

大家也可以在afterEach中添加禁止跳轉(zhuǎn)的條件，例如僅對(duì)特定的頁面進(jìn)行限制，或者執(zhí)行其他操作等。

到此這篇關(guān)于在VUE3中如何禁止網(wǎng)頁返回到上一頁的文章就介紹到這了,更多相關(guān)vue3禁止網(wǎng)頁返回到上一頁內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: