Vue-router参数传递乱码问题解决

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

前言

日更文章做一些问题记录，在使用vue-router传递参数时遇到中文乱码的问题。

代码

页面跳转并传参

     const { href } = this.$router.resolve({
        path: '/alarm/track',
        query: {
          userCode: data.userIndexCode,
          name: data.userRealName
        }
      });

接收参数

     this.userCode = this.$route.query.userCode;
     this.name = this.$route.query.name;

解决办法

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

      const { href } = this.$router.resolve({
        path: '/alarm/track',
        query: {
          userCode: data.userIndexCode,
          name: JSON.stringify(data.userRealName)
        }
      });

接收参数

        this.name = JSON.parse(this.$route.query.name);

总结

解决办法有很多中，以上是经过测试可用的一种。也可以试试用encodeURI或者encodeURIComponent转换，取到值后用decodeURI或者decodeURIComponent转回来。