vue-router组件内导航守卫判断返回按钮

组件内导航守卫优化

最新推荐文章于 2024-07-03 09:00:00 发布

原创最新推荐文章于 2024-07-03 09:00:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了组件内导航守卫无法有效拦截$router.go(-1)或物理返回按钮的问题，并提供了一个简单解决方案：通过使用setTimeout包裹拦截函数，可以确保导航守卫正确执行。文章还分享了一个具体的代码示例，展示了如何实现这一优化。

组件内导航守卫会出现无法拦截$router.go(-1)或者物理返回按钮，在拦截函数外包裹setTimeout即可。具体原因还未发现。

  setTimeout(() => {
    this.$confirm('编辑的页面布局尚未保存，确定离开？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      next()
      return
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消'
      })
      next(false)
      return
    })
  }, 500)