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

最新推荐文章于 2024-07-23 14:27:20 发布

Vamp_Piece

最新推荐文章于 2024-07-23 14:27:20 发布

阅读量3.1k

点赞数 1

分类专栏：前端 Vue JavaScript 文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/m0_50298323/article/details/131184080

版权

前端同时被 3 个专栏收录

35 篇文章 1 订阅

订阅专栏

Vue

19 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

在Vue3项目中，可以通过监听popstate事件并使用history.pushState来禁止浏览器的回退和前进功能。这可以在组件的onMounted钩子中实现，或者在全局级别如main.js/main.ts中设置。另外，还可以利用VueRouter的afterEach守卫或修改scrollBehavior来达到相同效果。

摘要由CSDN通过智能技术生成

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

页面加载时就进行禁止

页面加载时就进行禁止

<template>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  name: '',
  setup() {
    // 在要禁止后退的页面进行添加
    onMounted(() => {
      history.pushState(null, null, document.URL);
      
      window.addEventListener(
        'popstate',
        function(e) {
          history.pushState(null, null, document.URL);
        },false);
    });

    return { t };
  },
});
</script>
<style lang="scss">
</style>

总结：若是需要全局禁用则可在
1、main.js/main.ts中设置监听：
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.afterEach((to, from) => {
history.pushState(null, null, location.protocol + ‘//’ + location.host + ‘/#’ + to.path)
})