vue-router beforeEach 弹出框弹出又消失

萝卜芹菜芽

已于 2022-11-22 14:12:11 修改

阅读量1.1k

点赞数

分类专栏： vue-npm 文章标签： vue.js javascript 前端

于 2022-11-22 13:52:55 首次发布

本文链接：https://blog.youkuaiyun.com/github_36327470/article/details/127981379

版权

vue-npm 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了两种解决方案：一是利用setTimeout实现路由跳转时的提示框延时显示；二是使用history模式并提供配置根路径的方法，帮助开发者更好地管理前端路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2 种解决方案：
1、 setTimeout 延时弹出

router.beforeEach((to, from, next) => {
  if (storage.getSession('needLeaveTip')) {
    // setTimeout 防止confirm 弹出又消失
    setTimeout(() => {
      MessageBox.confirm(i18n.t('public.needLeaveTip'), {
        title: i18n.t('public.dialogTitle'),
        type: 'warning'
      }).then(() => {
        window.onbeforeunload = null;
        storage.clearOneSession('needLeaveTip');
        next();
      }).catch(() => {
        next(false);
      });
    }, 100);
  } else {
    next();
  }
  NProgress.done();
});

2、mode: history 模式

tip：可自行配置根路径参考
https://blog.youkuaiyun.com/github_36327470/article/details/106841359?spm=1001.2014.3001.5501

参考文章：
https://www.cnblogs.com/zffFighting/p/12965778.html
https://blog.youkuaiyun.com/weixin_46404395/article/details/123006658