Vue阻止页面回退简单方法（浏览器适用）

最新推荐文章于 2023-05-15 10:37:16 发布
VIP文章 最新推荐文章于 2023-05-15 10:37:16 发布
阅读量7.2k 收藏 14
点赞数 1
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48232426/article/details/125318562
版权

Vue阻止页面返回上级页面

一、如何阻止页面回退？

VUE中跳转页面后，阻止返回的方法有很多种，这里就不一一列举，我是用vue-prevent-browser-back第三方库来阻止页面返回，这个方法使用起来超级方便。

二、使用步骤

1.安装

代码如下：

npm install vue-prevent-browser-back --save

2.引入方式

代码如下：

import p
最低0.47元/天 解锁文章
m0_48232426
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue 禁用浏览器的前进后退操作
10-14
主要介绍了Vue 禁用浏览器的前进后退操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue单页面 回退页面 keeplive 缓存问题
10-15
主要介绍了解决vue单页面 回退页面 keeplive 缓存问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue中阻止浏览器后退的实例
10-16
今天小编就为大家分享一篇在vue中阻止浏览器后退的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue项目中设置阻止浏览器的回退
Baby_加油_的博客
08-11 1432
由于我们的项目导航是用的elmentUI的导航，点击设置activeIndex，所以当浏览器返回页面的时候，触发不了导航当前项的变化，所以要禁止掉 在main.js中设置 new Vue({ el: '#app', router, store, components: { App }, template: '<App/>', data(){ return { IsUseWebsocket: true,
【uni-app】H5的返回拦截经验分享
baidu_34861695的博客
09-02 3877
uni-app的onBackPress只能拦截左上角的返回，物理按键和左滑返回拦截不了，需要另外的解决方案。
vue 阻止页面回退（backspace键）
eliodadada的博客
04-13 1708
*这段代码得写在next()的后面，因为写在next()前面location.href并不是to的地址，这点跟vue1.0有点不同。2.在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新vuex的allowBack的值，location.href 获取的仍不是to的地址，所以得根据to的信息来拼起来。2.vue中结合vuex方法。
vue阻止页面回退
LxLzhz的博客
03-03 578
mounted() history.pushState(null, null, document.URL) window.addEventListener( 'popstate', () => { // 在这个可以添加条件判断 history.pushState(null, null, document.URL) }, false ) } ...
vue 阻止页面回退
weixin_48768170的博客
11-16 560
1.安装依赖 npm install vue-prevent-browser-back --save 2.在需要阻止的组件单独引入，然后注入… <template> <div> </div> </template> <script> import Home from "@/components/common/Home.vue"; import preventBack from 'vue-prevent-browse
vue 控制浏览器返回 防止返回
WMW_wmw的博客
05-15 618
【代码】vue 控制浏览器返回 防止返回。
vue 页面回退mounted函数不执行的解决方案
10-15
主要介绍了vue 页面回退mounted函数不执行的解决方案 ，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2.0页面前进刷新回退不刷新的实现方法
10-18
主要介绍了vue2.0页面前进刷新回退不刷新的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue router带参数页面刷新或回退参数消失的解决方法
12-03
传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望...
Vue2.0组织浏览器返回事件
xcj_20160810的博客
04-28 496
Prevent Browser Back for Vue2.0 模拟阻止（适用于PC，移动端）：在需要阻止浏览器返回上一页的页面使用次插件，当点击浏览器返回上一页时使页面不做任何变化。 Install npm install vue-prevent-browser-back --save Usage 在需要阻止的页面单独引入，然后注入. <template> &...
vue项目中阻止浏览器返回上一页
weixin_34257076的博客
04-11 4461
vue项目中在某个页面阻止浏览器返回上一页，适用移动端、PC端。 使用场景例如： 首页 与 A页面 来回跳转，那样点击浏览器返回时也会来回跳转，本想当页面在首页的时候就不再返回了，所以这个时候需要阻止浏览器的返回。 用法：https://github.com/WangMaoling/vue-prevent-browser-back 转载于:https://www.cnb...
vue禁用浏览器返回键
c_qianxia5040的博客
10-31 362
mounted() { // 禁用浏览器返回键 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.disableBrowserBack) }, destroyed() { // 清除popstate事件 否则会影响到其他页面 window.removeEventListener("popstate", this.disableBrowserBack
vue禁用后退前进功能（键盘回退、鼠标回退键）
03-30 1118
采用CefSharp.ChromiumWebBrowser开发项目当中，当鼠标点击侧边键时，会直接退出到登录页面，后续无法进行操作，要求禁用鼠标的回退键，防止以上事情发生。
vue项目禁止浏览器回退
xumengxia的博客
08-03 326
代码】vue项目禁止浏览器回退。
阻止vue3移动端浏览器回退功能
最新发布
06-02
要阻止Vue 3在移动端浏览器中的回退功能，您可以使用以下两种方法之一： 1. 使用Vue Router 如果您正在使用Vue Router，则可以使用以下代码阻止浏览器回退功能： ```javascript const router = createRouter({ history: createWebHistory(), routes: [...] }) router.beforeEach((to, from, next) => { if (from.path === '/' && to.path === '/home') { next(false) } else { next() } }) ``` 在这个例子中，我们检查当前路由是否是从根路径('/')到'/home'，如果是，我们可以使用`next(false)`来阻止浏览器回退功能。 2. 使用window.history对象 如果您没有使用Vue Router，您可以使用window.history对象来阻止浏览器回退功能： ```javascript window.history.pushState(null, null, window.location.href); window.onpopstate = function () { window.history.pushState(null, null, window.location.href); }; ``` 这段代码会在页面加载时将当前URL添加到历史记录中，并在用户点击浏览器的回退按钮时再次将当前URL添加到历史记录中，从而阻止浏览器回退功能。 希望这些方法能够帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值