不容错过，原生js实现类似vue路由守卫效果

JianZhen✓

已于 2022-11-11 16:40:22 修改

阅读量525

点赞数

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

于 2022-07-25 13:56:40 首次发布

本文链接：https://blog.csdn.net/aZHANGJIANZHENa/article/details/125757292

版权

前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

本文探讨了如何使用JavaScript原生方法实现浏览器历史回退时的路由提示对话框，与Vue路由守卫进行比较，并展示了在订单操作场景下的逻辑。同时介绍了Vue的onBeforeRouteLeave钩子在处理相同情境下的代码实现。

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

js原生模拟路由守卫

 window.addEventListener('popstate', function listener() {
    // commonUtils是我这项目的公共方法存储的文件

            commonUtils

                .showConfirmDialog('您确定要返回吗？订单信息已生成，您可在倒计时结束前，在“我的健康”->“我的课程”列表中查看')

                .then(() => {

                    commonUtils.gotoHome();

                    console.log('1');

                })

                .catch(() => {

                    window.history.pushState(null, '', document.URL);

                })

                .finally(() => commonUtils.hideLoading());

        });

        console.log(document.URL);

vue路由守卫写法

      
import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave((to) => {

            if (to.path === '/health-knowledge/course-pay-infomation') {

                commonUtils

                    .showConfirmDialog('您确定要返回吗？订单信息已生成，您可在倒计时结束前，在“我的健康”->“我的课程”列表中查看')

                    .then(() => {

                        commonUtils.gotoHome();

                    })

                    .catch(() => {

                        window.history.go(1);

                    })

                    .finally(() => commonUtils.hideLoading());

            }

        });