vue-router路由跳转的onComplete、onAbort函数使用方法

最新推荐文章于 2024-06-13 21:01:13 发布

原创最新推荐文章于 2024-06-13 21:01:13 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue基础专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中使用$router.push方法进行路由跳转的语法及回调函数的应用。包括如何通过onComplete回调处理成功的路由跳转，以及如何利用onAbort回调应对路由跳转被终止的情况。

//router.(location, onComplete?, onAbort?)
this.$router.push({
        name:'myRouter',
        params:{
          a:1
        }
      },(to)=>{
        console.log(to'onComplete')
      },(msg)=>{
        console.log(msg,'onAbort')
      })

onComplete
onComplete为成功跳转后调用，to为跳转到的路由信息如下图：
onAbort
onAbort在跳转路由终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用，msg参数为跳转的过程描述信息，例如，在beforeRouteEnter中使用next(‘/otherPath’)将路由转换到第三个地址，就会触发onAbort，msg如下图

该信息描述了，从/跳转到/myRouter/1时被重新定向了（并没有说明定向到哪）
注意：当路由在同一个路径跳转时，也会触发onAbort