vue传值的编码和解码方式

在Vue中，我们有时候需要通过组件之间进行数据传输，这时候就需要用到传值的编码和解码方式。下面是详细讲解“vue传值的编码和解码方式”的完整攻略。

编码方式

在Vue中，我们可以使用encodeURIComponent()方法对需要传递的值进行编码，该方法将传递的字符串进行URL编码，使其可以被传递到下一个组件。

示例：

// 组件A
<template>
  <button @click="gotoB">跳转到组件B</button>
</template>

<script>
export default {
  methods: {
    gotoB() {
      const str = '这是需要传递的字符串';
      const encodedStr = encodeURIComponent(str); // 进行编码
      this.$router.push({
        path: '/b',
        query: {
          encodedStr
        }
      });
    }
  }
};
</script>

// 组件B
<template>
  <div>{{ decodedStr }}</div>
</template>

<script>
export default {
  data() {
    return {
      decodedStr: ''
    };
  },
  created() {
    const encodedStr = this.$route.query.encodedStr; // 获取传递的参数
    const decodedStr = decodeURIComponent(encodedStr); // 进行解码
    this.decodedStr = decodedStr;
  }
};
</script>

在上面的代码中，我们通过encodeURIComponent()方法对需要传递的字符串进行编码，然后通过this.$router.push()方法将编码后的字符串传递给组件B。在组件B中，我们通过this.$route.query.encodedStr获取到传递的参数，再通过decodeURIComponent()方法进行解码。

解码方式

在Vue中，我们可以使用decodeURIComponent()方法对传递过来的值进行解码，该方法将URL编码后的字符串进行解码，还原为原始字符串。

示例：

// 组件A
<template>
  <button @click="gotoB">跳转到组件B</button>
</template>

<script>
export default {
  methods: {
    gotoB() {
      this.$router.push({
        path: '/b',
        query: {
          params: {
            name: '张三',
            age: 20
          }
        }
      });
    }
  }
};
</script>

// 组件B
<template>
  <div>{{ name }}，{{ age }}岁</div>
</template>

<script>
export default {
  computed: {
    name() {
      const params = this.$route.query.params; // 获取传递的参数
      return decodeURIComponent(params.name); // 对name进行解码
    },
    age() {
      const params = this.$route.query.params; // 获取传递的参数
      return params.age;
    }
  }
};
</script>

在上面的代码中，我们通过this.$router.push()方法将包含name和age参数的对象传递给组件B，其中name值是需要进行解码的，我们通过decodeURIComponent()方法对其进行解码，获取到原始字符串。