关于vue 页面带参跳转

关于vue页面带参跳转

方法一：

this.$router.push({
   path:`/detail/${id}` 
})

//取参：
this.$route.params.id

这种方式参数是将id跟在url后，刷新页面后参数不会丢失

方法二：

this.$router.push({
   name:'detail',
   params:{
       id:id     
   }
}

//取参：
this.$route.params.id

这种传参方式，必须用name进行跳转，url后不会显示id，刷新页面后参数会丢失

方法三：

this.$router.push({
   path:'/detail',
   query:{
       id:id
   }
})

//取参：
this.$route.query.id

这种传参方式是在url后跟id，query必须使用path进行传参,刷新页面后参数不会丢失

但是，如果要传的是一个对象或数组，需要转换成JSON对象传参，否则在地址栏中会被强制转换成[object Object]，而且刷新页面后数据会丢失，再优化一下，就将JSON对象加base64处理后再传参，代码如下：

//传参：
this.$router.push({
        path:'/detail',
        query:{data:Base64.encode(JSON.stringify(row))}
      })
//取参：
let data = Base64.decode(this.$route.query.data)
let data2 = JSON.parse(data);