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()

Logo

前往低代码交流专区

更多推荐