一招解决Vue-router中文乱码，码农们的福音

前端

2024-01-28 00:47:37

Vue-router 中的中文乱码问题：深入探讨与解决之道

在 Vue.js 应用中使用 Vue-router 时，传递中文参数可能会遇到恼人的中文乱码问题。这篇文章将深入探究导致中文乱码的原因，并提供全面的解决方案，帮助你轻松解决这个问题。

一、中文乱码的原因

Vue-router 在传递中文参数时，会将它们自动编码为 URL 编码格式。这种编码格式使用“%”符号和十六进制数字来表示非 ASCII 字符。当接收参数时，如果没有进行解码，就会导致中文乱码。

二、解决中文乱码的办法

要解决中文乱码问题，我们需要在传递参数前进行编码，在接收参数后进行解码。

1. 传递参数前进行编码

我们可以使用 encodeURIComponent() 方法对中文参数进行编码。此方法将中文参数编码为 URL 编码格式。

const query = {
  name: '张三',
  age: 20
};

const encodedQuery = encodeURIComponent(JSON.stringify(query));

2. 接收参数后进行解码

在接收参数时，我们可以使用 decodeURIComponent() 方法对中文参数进行解码。此方法将 URL 编码格式的中文参数解码为中文。

const query = JSON.parse(decodeURIComponent(query));

console.log(query); // { name: '张三', age: 20 }

三、使用 URLSearchParams 简化操作

除了使用 encodeURIComponent() 和 decodeURIComponent() 方法外，我们还可以使用 URLSearchParams 对象来简化操作。

// 创建一个 URLSearchParams 对象
const params = new URLSearchParams();

// 添加查询参数
params.append('name', '张三');
params.append('age', 20);

// 获取查询参数
const name = params.get('name');
const age = params.get('age');

console.log(name); // 张三
console.log(age); // 20