在VUE3中禁止网页返回到上一页的方法
更新时间：2023年09月14日 14:28:06 作者：专业研究祖传Bug编写术
这篇文章主要介绍了在VUE3中如何禁止网页返回到上一页,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
可以使用以下方法在Vue 3中禁止网页返回到上一页：
第一种：监听返回事件
使用返回监听事件，在用户点击返回按钮的时候触发，触发后使用window.history.forward()回到下一页。
代码如下：
<script language="javascript">
window.addEventListener('popstate', function () {
window.history.forward();
});
</script>
这种方法无法阻止浏览器返回到上一页，所以就会导致页面会出现闪一下的情况，故不推荐使用这种方法。
第二种：在页面中修改历史记录
使用history.pushState()方法将当前URL添加到浏览器历史记录中，从而覆盖上一页的URL。
我们把参数设置为空，就相当于把上一页的记录清除了，就可以实现无法返回到上一页的目的。
例如，在Vue 3应用程序的created生命周期或setup语法的onMounted中添加history.pushState(null, null, location.href);
代码如下：
<script setup>
onMounted(()=>{
history.pushState(null, null, location.href);
})
</script>
这种方法就不会有闪一下的现象，但如果在多页面的应用中，你会发现，使用这种方法只能在当前页面生效。
第三种：在路由中修改历史记录
在路由的afterEach中清除上一页数据让路由无法跳转，从而实现禁止网页返回到上一页的目的。
注意：
history.pushState(null, null, location.href)不要添加到了beforeEach中，在这里添加起不到作用。因为这是在跳转之前执行，这个时候路由还能拿到上一页数据，从而完成跳转到下一页。
例如，在router.js中添加以下代码：
import { createRouter,createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes:[
{
name: 'test1',
path:'/test1',
component:() => import('../components/test1.vue'),
},
{
name:'test2',
path:'/test2',
component:() => import('../components/test2.vue')
}
]
})
// 每次进行路由跳转时都会执行
router.beforeEach(function(to,from,next){
// 注意写在此处起不到禁用返回的功能，因为这是在跳转前执行，路由还能拿到跳转之前的上一页数据
})
// 进行路由跳转后执行
router.afterEach(function(to,from){
// 跳转后清除一下上一页的数据
history.pushState(null, null, location.href);
})
大家也可以在afterEach中添加禁止跳转的条件，例如仅对特定的页面进行限制，或者执行其他操作等。
到此这篇关于在VUE3中如何禁止网页返回到上一页的文章就介绍到这了,更多相关vue3禁止网页返回到上一页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue3实现动态路由及菜单,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
因为新公司使用react技术栈，包括Umi、Dva、Ant-design等一系列解决方案。本文就简单的介绍一下vue转react入门指南，感兴趣的可以了解一下2021-10-10
在Vue中,KeepAlive组件是一种特殊的组件,用于缓存已经渲染过的组件实例,本文主要为大家详细介绍了KeepAlive组件的用法,需要的小伙伴可以参考下2023-09-09
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
这篇文章主要介绍了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
这篇文章主要给大家介绍了关于uniapp中app与webview通讯的相关资料,这里的通信主要是打包APP端和web-view内嵌网页的双向通信,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了使用vue实现手写签名功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue中getters的使用与四个map方法的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要给大家介绍了关于vue.js Router中嵌套路由的相关资料,所谓嵌套路由就是路由里面嵌套他的子路由,文章通过示例代码介绍的非常详细,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了解决vue组件销毁之后计时器继续执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue使用mixin分发组件的可复用功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
最新评论