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

萝卜芹菜芽

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

阅读量907

点赞数

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

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

本文链接：https://blog.csdn.net/github_36327470/article/details/127981379

版权

vue-npm 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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.csdn.net/github_36327470/article/details/106841359?spm=1001.2014.3001.5501

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