在vue项目中路由跳转query取值的坑

问题描述：

在当前页面使用this. $router.push() 进行路由跳转传参时，使用了query，传的是Boolean类型的数据，但是query里面的属性的值取的时候都会变成字符串。

this.$router.push({
        path: `/ledgers/${type}/judge`,
        query: {isFinish:true}
      })

在跳转后的页面使用

let {isFinish} = this.$route.query;
console.log(isFinish) // true 但是个字符串 就会导致在页面使用isFinish出现问题

出现原因：

query的值是直接从页面URL中取的，而在页面URL上的参数的类型只能是字符串类型。

解决方案：

1. 在传值之前把要传的参数单独放到一个对象里，在放到query里面，然后进行JSON.stringify()处理，到了目标页面后再进行JSON.parse()处理，还原对象。这种方法的好处是可以一次性处理多个参数，而且适用度高，建议使用这种方法。

2. 如果只是boolean值时可以使用 Boolean(this.$route.query.isFinish) 将其转成boolean