Vue中this.$router.push和this.$router.resolve的比较

以前我们讨论过this.$router.push()的动态用法，她有两种方式，分别为：

//path-query方式，这种地址栏会显示参数  http://localhost:8080/resolve?a=1
this.$router.push({
    path:'/resolve',
    query:{
        a:1
    }
})
this.$route.query.a获取参数



//name-params方式，这种地址栏不会显示参数   http://localhost:8080/resolve
this.$router.push({
    name:'resolve',
    params:{
        a:1
    }
})
this.$route.params.a获取参数

对于this.$router.resolve()也有两种方式，resolve一般需要搭配window.open()进行使用,表示打开一个新地址栏。

//path-query方式，地址栏显示参数 http://localhost:8080/resolve?a=1
let routerUrl=this.$router.resolve({
    path:'/resolve',
    query:{
        a:1
    }
})
window.open(routerUrl.href,'_blank')
this.$route.query.a获取参数

//name-params方式，参数无效，一般通过localStorage进行参数存储和获取
let  routerUrl=this.$router.resolve({
  name:'resolve',
  params:{
    a:1
  }
})
localStorage.setItem('msg','123')
window.open(routerUrl.href,'_blank')

综合发现，this.$router.push和this.$router.resolve区别在于name-params的路由效果不同，同时this.$router.resolve一般需要配合window.open()方法进行一起使用。