vue阻止頁面回退的實(shí)現(xiàn)方法(瀏覽器適用)
vue阻止頁面回退的方法
如何阻止頁面回退？
VUE中跳轉(zhuǎn)頁面后，阻止返回的方法有很多種，這里就不一一列舉，我是用vue-prevent-browser-back第三方庫來阻止頁面返回，這個(gè)方法使用起來超級(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í)頁面！</p>
? ? ? ? </div>
? ? </div>
</template>
<script>
import preventBack from 'vue-prevent-browser-back';//組件內(nèi)單獨(dú)引入
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時(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的信息來拼起來
3.接下來就是最核心的了，在app.vue的mounted里面寫onpopstate事件：
window.onpopstate = () => {
? ? if (!this.allowBack) { ? ?// ? ?這個(gè)allowBack 是存在vuex里面的變量
? ? ? ? history.go(1)
? ? }
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
VUE使用day.js顯示時(shí)分秒并實(shí)時(shí)更新時(shí)間效果實(shí)例
vue.js是目前比較流行的前端框架之一,它提供了非常多的基礎(chǔ)組件和工具庫,以方便開發(fā)者快速搭建具有可重用性的web應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于VUE使用day.js顯示時(shí)分秒并實(shí)時(shí)更新時(shí)間效果的相關(guān)資料,需要的朋友可以參考下2024-04-04
vue中選中多個(gè)選項(xiàng)并且改變選中的樣式的實(shí)例代碼
這篇文章主要介紹了vue中選中多個(gè)選項(xiàng)并且改變選中的樣式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了Vue.js輪播圖走馬燈，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
el-date-picker日期范圍限制的實(shí)現(xiàn)
本文主要介紹了el-date-picker日期范圍限制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了使用vue打包進(jìn)行云服務(wù)器上傳，本文給大家介紹的非常詳細(xì)，對(duì)大家的工作或?qū)W習(xí)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue實(shí)現(xiàn)微信瀏覽器左上角返回按鈕攔截功能
這篇文章主要介紹了vue實(shí)現(xiàn)微信瀏覽器左上角返回按鈕攔截功能,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
iview form清除校驗(yàn)狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了iview form清除校驗(yàn)狀態(tài)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue項(xiàng)目使用md5加密、crypto-js加密、國密sm3及國密sm4的方法
密碼或者其他比較重要東西假如使用明文傳輸中是很危險(xiǎn)的,所以就需要前端一些加密協(xié)議,對(duì)密碼、手機(jī)號(hào)、身份證號(hào)等信息進(jìn)行保護(hù),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用md5加密、crypto-js加密、國密sm3及國密sm4的相關(guān)資料,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了深入理解vue Render函數(shù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07