vue 解决路由跳转query参数类型会自动转换成字符串的问题-526互联

问题：使用query进行路由跳转传参时，传的是布尔值、数字等，在页面上route.query里面得到的却全是字符串。

// push跳转代码：
this.$router.push({ path: './childPage', query: { userId: 666,isTest:false } })
// router-link跳转代码：
<router-link :to="{path:'./childPage',query:{userId:666,isTest:false}}">携带query参数跳转</router-link>

//childPage.vue文件
console.log(this.$route.query)
// {
//     "userId": "666",
//     "isTest": "false"
// }

解决方案：

  computed:{
    // 针对单个属性
    userId(){
      const {userId}=this.$route.query
      return Number(userId)
    },
    // 针对单个属性
    isTest(){
      const {isTest}=this.$route.query
      return isTest===true || isTest==='true'
    }
  }

以上是简单易上手的方案，还有就是转换全部query的值，以及用路由拦截器去处理，这些要根据自己的业务来定，不做详细展示。