Vue 路由跳转和跳转在新窗口打开以及query 和 params 传参方式

Vue 路由跳转配置：

openDetails(val){
    this.$router.push({ 
        path: "/design-teamwork-task",
        query: {
            projectDetails: val
        },
        //或者
        name: 'designTeamworkTask',
        params: {
            projectDetails: val
        }
    });
},

这里注意有两种传参方式：

一种是 query ,传参的数据会在导航栏中显示；另一种是通过 params  传参，传参数据不会在导航栏中显示，同时需要给路由添加 name 属性。

Vue跳转在新开窗口打开需要配置：

enterClick(){
  const {href} = this.$router.resolve({
    path: '/file-preview',
    query: {
      pdf: JSON.stringify(this.pdf)
    }
  })
  window.open(href, '_blank')
},

注意：

采用 resolve 来打开新窗口，这里分别采用两种传参方式来处理，发现在新窗口中，mounted 生命周期中，打印 this.$route 可以看到 通过 params 无法进行传参，传递过来的是空对象，而 query 依然可以正常使用。

如果我们通过 list 路由 跳转至 detail 路由 

if (this.$route.params.data) {
  let value = JSON.parse(decodeURIComponent(this.$route.params.data))
  localStorage.setItem('EQ_LIST', JSON.stringify(value))
  this.data = value
} else {
  this.data = JSON.parse(localStorage.getItem('EQ_LIST'))
}

路由更多信息：router.push(),router.replace(),router.go()