vue禁止某个页面通过浏览器返回

最新推荐文章于 2023-07-30 22:45:20 发布
最新推荐文章于 2023-07-30 22:45:20 发布
阅读量1k 收藏 4
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zaoqinghuan/article/details/110548305
版权

需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换

1、.在路由配置中给这个当前路由添加meta信息
在这里插入图片描述
2、在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新vuex的allowBack的值
在这里插入图片描述
注意写在next()的后面，因为写在next()前面location.href并不是to的地址，这点跟vue1.0有点不同。
location.href 获取的仍不是to的地址，所以得根据to的信息来拼起来
3、在app.vue的mounted里面写onpopstate事件：
在这里插入图片描述

前端对象
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Vue 3中如何禁止网页返回到上一页
一起学习
09-06 2012
文中介绍了3种在VUE3中实现禁止浏览器返回上一页的方法。
在vue中阻止浏览器后退的实例
10-16
今天小编就为大家分享一篇在vue中阻止浏览器后退的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue阻止页面回退
LxLzhz的博客
03-03 575
mounted() history.pushState(null, null, document.URL) window.addEventListener( 'popstate', () => { // 在这个可以添加条件判断 history.pushState(null, null, document.URL) }, false ) } ...
vue项目禁止点击浏览器返回的上一步
肖肖肖丽珠的博客
03-01 1876
如果进入子页面需要一个主页面的列表的id。那么从子页面退回主页面后，可以点击浏览器返回上一页就进入了子页面。但是当前你的id是不知道的。 所以要禁止浏览器返回进入的子页面。 main.js window.addEventListener('popstate', function() { history.pushState(null, null, document.URL) }) router.js const router = new Router({ mode: 'hash',.
vue跳转到新的页面之后，不让其回退的解决方法
qq_73463251的博客
07-30 824
直接把代码复制进去，方可实现！
Vue：禁用浏览器的前进后退
qq_39025670的博客
08-15 6714
一.禁用前进后退功能 在开发vue应用中，如何禁用浏览器的前进后退功能呢？ 网上搜到的答案基本如下： history.pushState(null, null, document.URL) window.addEventListener('popstate', function() { history.pushState(null, null, document.URL) }) 但应该放在哪儿？ 经过尝试，我是如此写的： main.js中，增加popstate监听 window.add
vue 退出后禁止浏览器前进或者后退
weixin_47906106的博客
10-17 2176
用户在退出登录后需要清楚sessionStorage，并且重定向到login页面，但是在没有退出的情况下点击浏览器的后退按钮然后再点击前进不用登陆依然可以访问的原页面，现在需要解决这个问题。在退出后要跳转到的页面 禁止回退页面的mounted( )方法中添加禁止浏览器的后退的方法。
vue 阻止页面回退
weixin_48768170的博客
11-16 557
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的禁止浏览器后退
weixin_45292837的博客
03-16 186
mounted方法里写入。
在vue里面，阻止浏览器返回键（包括安卓硬件返回）
qq_43528934的博客
04-23 692
https://www.jianshu.com/p/539e2dfb0a65
vue监听浏览器原生返回按钮,进行路由转跳操作
10-14
主要介绍了vue监听浏览器原生返回按钮,进行路由转跳操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现微信浏览器左上角返回按钮拦截功能
11-21
　在微信公众号开发中，有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑，而并不是让页面直接返回上一页，之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好，所以...
Vue 禁用浏览器的前进后退操作
10-14
主要介绍了Vue 禁用浏览器的前进后退操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
异步组件的用法
zaoqinghuan的博客
03-13 3646
随着项目越来越大，性能问题已经成为了困扰业务发展的重要因素。业务发展、用户体验都非常迫切的需要释放页面的负载，提高页面加载速度。vue项目中，异步组件的使用有利于项目的性能优化。 一、什么是异步组件 异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。 结合vue的源码分析，异步组件的本质是：实现了2次渲染，先渲染成注释节点（占位），当组件渲染成功后，调用forceRender重新渲染 二、异步组件的三种方法 1、工厂函数实现 在大型应用中，.
vue单页面使用loaction.href跳转新页面，返回原来页面后，页面不刷新
zaoqinghuan的博客
12-22 2802
在vue项目中，有时我们会遇到这样的问题： 没有使用keep-alive。 在微信浏览器或者在企业微信环境下，在A页面中用window.location.href跳转到新页面B，然后点击浏览器返回按钮回到之前的页面A，这时，我们会发现用nginx起的服务页面会不刷新，在用node起服务中页面是正常刷新的。为什么会出现这样的问题呢?是因为微信浏览器对页面进行了缓存。 解决方法: ...
vue图片懒加载
zaoqinghuan的博客
11-15 1904
什么是图片懒加载，通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张设置好的图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。比如一个页面中有很多图片，如果一上来就发送这么多请求，页面加载就会很漫长。 图片懒加载不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前。 ...
vue使用install函数把组件做成插件方便全局调用(封装公用组件)
zaoqinghuan的博客
06-29 868
在项目中，我们有时需要把自定义组件做成插件，方便全局使用。下面以弹框提示为例。 一、在components文件夹中新建alert.vue，用作弹框提示组件的样式，内容，功能。 二、在同级目录下建alert.js文件。这里是核心思想 ...
实现页面平滑滚动到某个位置
zaoqinghuan的博客
04-22 847
背景： 在一些项目中，在页面的右下角会有一个返回顶部的按钮。点击这个按钮，页面会平滑的滚动到顶部。我们向大家介绍了页面平滑滚动的2种方法。 一、window.scrollTo() window.scrollTo(x, y) 可以通过传入文档(HTML 中的 document)中的x轴坐标和y轴坐标将页面滚动到某个位置。该 API 还支持传入一个 options 对象，其中left属性等同于x轴坐标；top属性等同于y轴坐标；behavior 属性表示滚动行为，其类型为 String，可选值有 3 个：smo
vue禁止浏览器切屏
最新发布
12-10
Vue并不能直接禁止浏览器切屏，因为浏览器的切屏功能是由浏览器自身控制的，并不是Vue框架能够直接控制的部分。 但是，可以通过一些JavaScript的事件监听和处理来实现类似的效果。例如，可以监听浏览器窗口的resize...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值