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