vue阻止頁(yè)面回退的實(shí)現(xiàn)方法(瀏覽器適用)
vue阻止頁(yè)面回退的方法
如何阻止頁(yè)面回退？
VUE中跳轉(zhuǎn)頁(yè)面后，阻止返回的方法有很多種，這里就不一一列舉，我是用vue-prevent-browser-back第三方庫(kù)來(lái)阻止頁(yè)面返回，這個(gè)方法使用起來(lái)超級(jí)方便。
使用步驟
1.安裝
代碼如下：
npm install vue-prevent-browser-back --save
2.引入方式
代碼如下：
import preventBack from 'vue-prevent-browser-back';//組件內(nèi)單獨(dú)引入
3.使用實(shí)例
代碼如下：
<template>
? ? <div class="container">
? ? ? ? <div class="container-text">
? ? ? ? ? <p>禁止返回上級(jí)頁(yè)面！</p>
? ? ? ? </div>
? ? </div>
</template>
<script>
import preventBack from 'vue-prevent-browser-back';//組件內(nèi)單獨(dú)引入
export default {
? ? name: '',
? ? props: {},
? ? mixins: [preventBack],//注入 ?阻止返回上一頁(yè)
? ? components: {},
? ? data() {
? ? ? ? return {};
? ? },
? ? computed: {},
? ? watch: {},
? ? methods: {},
? ? created() {},
? ? mounted() {}
};
</script>以上介紹了vue-prevent-browser-back的使用，在組件內(nèi)引入后加入**mixins: [preventBack]**就完成了，是不是比其他方法更簡(jiǎn)單呢。
vue阻止頁(yè)面回退（backspace鍵）
原生js方法
<script language="javascript">
? //防止頁(yè)面后退 ?使用在vue時(shí) 掛載到mounted中
? history.pushState(null, null, document.URL);
? window.addEventListener('popstate', function () {
? ? ?history.pushState(null, null, document.URL);
? });
</script>vue中結(jié)合vuex方法
1.在路由配置中給這個(gè)路由添加meta信息，比如:
{
? ? path: '/index',
? ? component: Index,
? ? meta: {allowBack: false}
}2.在全局的router.beforeEach 函數(shù)里面獲取allowBack的狀態(tài)，同時(shí)更新vuex的allowBack的值，
let allowBack = true ? ?// ? ?給個(gè)默認(rèn)值true
if (to.meta.allowBack !== undefined) {
? ? allowBack = to.meta.allowBack
}
if (!allowBack) {
? ? ? history.pushState(null, null, location.href)
} ? ?
store.dispatch('updateAppSetting', {
? ? allowBack: allowBack
})**這段代碼得寫在next()的后面，因?yàn)閷懺趎ext()前面location.href并不是to的地址，這點(diǎn)跟vue1.0有點(diǎn)不同。
location.href 獲取的仍不是to的地址，所以得根據(jù)to的信息來(lái)拼起來(lái)
3.接下來(lái)就是最核心的了，在app.vue的mounted里面寫onpopstate事件：
window.onpopstate = () => {
? ? if (!this.allowBack) { ? ?// ? ?這個(gè)allowBack 是存在vuex里面的變量
? ? ? ? history.go(1)
? ? }
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
加入購(gòu)物車，是一個(gè)登錄后的用戶 才能進(jìn)行的操作，所以需要進(jìn)行鑒權(quán)判斷，判斷用戶token是否存在，這篇文章主要介紹了Vue加入購(gòu)物車判斷token添加登錄提示,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue項(xiàng)目配置在局域網(wǎng)下訪問方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
在?Web?應(yīng)用程序中,有時(shí)需要為某些內(nèi)容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個(gè)全屏功能的工具類,希望對(duì)大家有所幫助2024-03-03
vue基礎(chǔ)之事件v-onclick="函數(shù)"用法示例
這篇文章主要介紹了vue基礎(chǔ)之事件v-onclick="函數(shù)"用法,結(jié)合實(shí)例形式分析了vue.js事件v-on:click="函數(shù)"的data數(shù)據(jù)添加、點(diǎn)擊響應(yīng)、以及留言本功能相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue項(xiàng)目如何部署到Tomcat服務(wù)器上
這篇文章主要介紹了Vue項(xiàng)目如何部署到Tomcat服務(wù)器上,Vue中自帶webpack,可以通過一行命令將項(xiàng)目打包,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Ant-design-vue Table組件customRow屬性的使用說明
這篇文章主要介紹了Ant-design-vue Table組件customRow屬性的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-10-10
Vue利用廣度優(yōu)先搜索實(shí)現(xiàn)watch
這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用廣度優(yōu)先搜索實(shí)現(xiàn)watch（有意思），文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
本篇文章主要介紹了vue-router跳轉(zhuǎn)頁(yè)面的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了vant實(shí)現(xiàn)購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
解決vue頁(yè)面刷新vuex中state數(shù)據(jù)丟失的問題
這篇文章介紹了解決vue頁(yè)面刷新vuex中state數(shù)據(jù)丟失的問題，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01