vue路由跳转(这里是以传对象的方式演示)

1:router-link 打开新窗口必须配合query,在当前页跳转query,params都可以 ,是否打开新窗口target="_blank"

//传参

<router-link  :to="{name:'recordPreview', params: {dataForm:JSON.stringify(dataForm)}}"  target="_blank" >预览</router-link>

//接收

this.dataForm= JSON.parse(this.$route.params.dataForm);

2:this.$router.resolve 打开新窗口,且地址栏显示参数 

let routeUrl = this.$router.resolve({ // 核心语句

        path: '/recordPreview', // 跳转的路径

        query: { // 路由传参时push和query搭配使用 ，作用时传递参数

           dataForm: JSON.stringify(_this.dataForm)

         }

  })

window.open(window.location.origin + '/admin-web/' + routeUrl.href, '_blank')

3:使用this.$router.push, params 地址栏不显示参数但是打开的是当前窗口 

 //传参

let routeUrl =this.$router.push({name:'recordPreview',  params:{dataForm:JSON.stringify(_this.dataForm)}})

//接收

this.dataForm= JSON.parse(this.$route.params.dataForm);

4:使用localStorage 设置本地缓存的方式 可以做到打开新窗口并且地址栏不显示参数 

//传参  

var _this = this

let routeUrl = this.$router.resolve({ // 核心语句

   path: '/recordPreview', // 跳转的路径

})

localStorage.setItem("dataForm", JSON.stringify(_this.dataForm))

window.open(window.location.origin + '/admin-web/' + routeUrl.href, '_blank')

//接收

mounted() {

    if (localStorage.getItem('dataForm')){

      this.dataForm= JSON.parse(localStorage.getItem('dataForm'));

      localStorage.clear();

    };

  },