Vue 禁用浏览器的前进后退操作

最新推荐文章于 2023-06-13 11:12:18 发布

guhy fighting

最新推荐文章于 2023-06-13 11:12:18 发布

阅读量2.2k

点赞数 2

分类专栏：前端问题总结文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u013994400/article/details/129144048

版权

前端问题总结专栏收录该内容

51 篇文章 2 订阅

订阅专栏

一、禁用前进后退功能
1、main.js中，增加popstate监听

window.addEventListener('popstate', function() {
 history.pushState(null, null, document.URL)
})

2、router的index.js中

const router = new Router({
 mode: 'hash',
 routes,
 scrollBehavior: () => {
  history.pushState(null, null, document.URL)
 }
})

也可以尝试放在router的beforeEach/afterEach中

router.afterEach((to, from) => {
 history.pushState(null, null, location.protocol + '//' + location.host + '/#' + to.path)
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

guhy fighting

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

在Vue 3中如何禁止网页返回到上一页

一起学习

09-06

3391

文中介绍了3种在VUE3中实现禁止浏览器返回上一页的方法。

禁止后退键backspace

nddjava的专栏

11-12

1449

var Xjh={ } Xjh.commonUtils = { //处理键盘事件禁止后退键（Backspace）密码或单行、多行文本框除外 banBackSpace : function(e){ var ev = e || window.event;//获取event对象 var obj = ev.target || ev.srcElement;//

2 条评论您还未登录，请先登录后发表或查看评论

vue 中禁用浏览器的前进/回退

qq_45341411的博客

01-29

875

禁用浏览器的前进/回退

vue禁用后退前进功能（键盘回退、鼠标回退键）

03-30

1317

采用CefSharp.ChromiumWebBrowser开发项目当中，当鼠标点击侧边键时，会直接退出到登录页面，后续无法进行操作，要求禁用鼠标的回退键，防止以上事情发生。

vue2中怎么禁用浏览器的前进后退按钮

04-18

您可以使用Vue Router中的导航守卫来实现禁用浏览器的前进后退按钮。在导航守卫beforeRouteLeave中，使用window.history.pushState()或window.history.replaceState()方法来改变浏览器历史记录，从而使用户无法使用...

vue实现微信浏览器左上角返回按钮拦截功能

10-15

主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

禁用浏览器后退按钮并在浏览器后退按钮单击事件上调用Javascript功能

04-07

这个需求在标题"禁用浏览器后退按钮并在浏览器后退按钮单击事件上调用Javascript功能"中被提出。下面我们将详细探讨如何实现这一目标。首先，JavaScript是Web开发中的核心语言，它允许我们在用户与网页交互时进行...

vue 阻止页面回退（backspace键）

eliodadada的博客

04-13

1861

*这段代码得写在next()的后面，因为写在next()前面location.href并不是to的地址，这点跟vue1.0有点不同。2.在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新vuex的allowBack的值，location.href 获取的仍不是to的地址，所以得根据to的信息来拼起来。2.vue中结合vuex方法。

在vue中阻止浏览器后退的实例

12-13

如下所示： history.pushState(null, null, document.URL); window.addEventListener(‘popstate', function() { history.pushState(null, null, document.URL); }); vue阻止浏览器后退按钮与js相同，同样没有脱离原生的js 以上这篇在vue中阻止浏览器后退的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue禁止浏览器前进和后退

林同学啊的博客

09-09

2272

最近在做着的这个项目发现了一些bug，当用户点击浏览器的前进和撤退的时候，上一页数据保存了下来并没有刷新页面，这样会出现很多奇奇怪怪的bug，我只希望用户通过按钮来跳转，然后就需要禁止浏览器的前进和后退 1.main.js中，增加popstate监听 // 禁止浏览器前进后退另一部本在router的index.js中 window.addEventListener('popstate', function() { history.pushState(null, null, document

vue 退出后禁止浏览器前进或者后退

weixin_47906106的博客

10-17

2333

用户在退出登录后需要清楚sessionStorage，并且重定向到login页面，但是在没有退出的情况下点击浏览器的后退按钮然后再点击前进不用登陆依然可以访问的原页面，现在需要解决这个问题。在退出后要跳转到的页面禁止回退页面的mounted( )方法中添加禁止浏览器的后退的方法。

vue的禁止浏览器后退

weixin_45292837的博客

03-16

221

mounted方法里写入。

Vue3项目中禁止浏览器回退或前进功能

热门推荐

lx_1024的博客

12-19

1万+

需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换整理一下解决方法和使用方法： 1.在路由配置中给这个路由添加meta信息，比如: { path: '/home', component: xxx, meta: {allowBack: false} }2.在全局的router.beforeEach 函数里面获取allowBack的状态，同

【VUE/JS】vue和js禁止浏览器页面后退

小猪的博客

12-03

2172

1、vue 禁止浏览器后退需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换整理一下解决方法和使用方法： 1.在路由配置中给这个路由添加meta信息，比如: { path: '/home', component: xxx, meta: {allowBack: false} } 2.在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新...

vue使用浏览器前进后退

05-17

Vue.js是一个单页面应用程序框架，这意味着在页面加载后，所有的路由都在前端处理，而不是刷新整个页面。因此，Vue.js不能直接控制浏览器的前进后退按钮。不过，可以使用Vue.js的路由管理器Vue Router来实现浏览器的前进后退功能。Vue Router提供了两个方法：`router.go()`和`router.back()`，可以让你控制浏览器的前进后退行为。 `router.go(n)`可以让你在浏览器历史记录中前进或后退n步，正数表示前进，负数表示后退。 `router.back()`可以让你回到前一个页面。以下是一个使用Vue Router实现浏览器前进后退的示例代码： ```javascript // 导入Vue和Vue Router import Vue from 'vue' import VueRouter from 'vue-router' // 安装Vue Router Vue.use(VueRouter) // 定义路由 const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] // 创建路由管理器 const router = new VueRouter({ routes }) // 在Vue实例中使用路由管理器 new Vue({ router }).$mount('#app') ``` 在模板中使用`router-link`组件来创建链接： ```html <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> ``` 这样你就可以通过点击链接来切换页面，并且可以使用`router.go()`和`router.back()`方法来实现浏览器的前进后退功能。