导航守卫【react】

474 阅读1分钟

导航守卫

导航守卫:当离开一个页面,进入另一个页面时,触发的事件

history对象

  • listen: 添加一个监听器,监听地址的变化,当地址发生变化时,会调用传递的函数

    • 参数:函数,运行时间点:发生在即将跳转到新页面时

      • 参数1:location对象,记录当前的地址信息

      • 参数2:action,一个字符串,表示进入该地址的方式

        • POP:出栈

          • 通过点击浏览器后退、前进
          • 调用history.go
          • 调用history.goBack
          • 调用history.goForward
        • PUSH:入栈

          • history.push
        • REPLACE:替换

          • history.replace
    • 返回结果:函数,可以调用该函数取消监听

  • block:设置一个阻塞,并同时设置阻塞消息,当页面发生跳转时,会进入阻塞,并将阻塞消息传递到路由根组件的getUserConfirmation方法。

    • 返回一个回调函数,用于取消阻塞器

路由根组件

  • getUserConfirmation

    • 参数:函数

      • 参数1:阻塞消息

        • 字符串消息

        • 函数,函数的返回结果是一个字符串,用于表示阻塞消息

          • 参数1:location对象
          • 参数2:action值
      • 参数2:回调函数,调用该函数并传递true,则表示进入到新页面,否则,不做任何操作