解决Vue路由传参中文乱码问题

最新推荐文章于 2024-05-07 19:01:44 发布

RTX99090

最新推荐文章于 2024-05-07 19:01:44 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端编程

本文链接：https://blog.csdn.net/TechChamp/article/details/133457276

版权

编程专栏收录该内容

361 篇文章 ¥29.90 ¥99.00

订阅专栏

本文介绍了在Vue应用中解决路由传参中文乱码问题的方法，涉及到Utf8编码解码，以及如何在路由中使用函数进行编码和解码以确保中文参数正确传递和显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue应用程序中，我们经常需要使用路由传递参数来实现页面之间的数据交互。然而，在某些情况下，如果我们在路由中传递中文参数，可能会遇到中文乱码的问题。本文将介绍如何解决Vue路由传参中文乱码问题，并提供相应的源代码示例。

Utf8编码与解码

在解决中文乱码问题之前，我们需要了解一些关于编码和解码的基本知识。在JavaScript中，我们可以使用encodeURIComponent()函数对参数进行UTF-8编码，以确保参数能够正确传递。而在接收参数时，我们可以使用decodeURIComponent()函数对参数进行解码，以还原原始的中文字符。

下面是一个简单的示例，演示了如何使用编码和解码函数：

// 编码参数
let encodedParam = encodeURIComponent('中文参数'

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RTX99090

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

vue axios传中文参数导致乱码的解决方案之encodeURI

yangbaobao的博客

05-22

2万+

axios.get(filterdata, { params: { strCustomer: encodeURI(filterUser), strDt: _this.date }, headers: { "Content-Type": "application/x-w...

Vue cli构建及项目打包以及出现的问题解决

10-18

关于路由传参的处理，需要注意的是`<router-link>`的`params`对象中如何处理，以及`path`的最后一个冒号是否书写等细节。这些细节在项目中的具体实现与配置都是构建一个功能完善的应用的关键。为了在项目中使用第...

参与评论您还未登录，请先登录后发表或查看评论

Vue2之路由跳转传参中文问题处理

最新发布

yuanjinshenglife的专栏

05-07

1443

Vue2之路由跳转传参中文问题处理

vue路由跳转传参乱码解决

a_b_ccv的博客

12-09

8336

vue路由组件跳转传参中文乱码解决 -在路由传参this.$router.push("/index?uname=xxx") 在下一个页面加载时截取导航栏中的参数用location.href截取到导航栏再用截取或者正则截取,我用的是截取中的split方法下一个组件加载时用created 在获取导航栏中的信息时,提前用**decodeURL(loaction.href)**包住就可以解决中文...

vue带参跳转页面中文会出现乱码

changyana的博客

03-21

2659

然后可以看到上方的url是正确的中文，但是下边解析出来后就成了乱码。

query路由传值出现乱码问题

weixin_55800388的博客

03-28

659

如果获取对应的query传的值，可以根据不同的应用框架，比如项目中使用的是Vue还是React，使用对应的api，获取query的传值即可。：传值过程中，浏览器强制对所传的数据进行了encodeURI加密。：使用decodeURI,当然前提是获取到传来的值。

Vue项目：路由跳转时中文传参被URL编码，怎么解决？用js封装Base64编码解码加密解密

weixin_46099312的博客

07-15

3916

Vue项目路由传参中文，加密解密方式

详解vue-router传参的两种方式

01-19

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js ...

vue3 路由出现乱码

09-06

- *1* [vue路由跳转传参乱码解决](https://blog.csdn.net/a_b_ccv/article/details/103455108)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search...

a标签传参数为汉字时乱码

春meng丫

04-13

975

在tomcat的server.xml中找到 URIEncoding=“UTF-8”

解决a标签传参接收汉字乱码

qq_53694927的博客

09-18

398

解决a标签传参接收汉字乱码

vue变量赋值中文，但是输出为乱码，解决办法

changyana的博客

09-21

721

编码问题，应该改为UTF-8进行保存运行

<a></a>标签传值，汉字出现乱码解决办法

啊哦啊哦啊哦！开心快乐哟！

06-17

6618

<a></a>传值出现乱码的解决方案

URL编码解决中文字符乱码(encodeURIComponent和decodeURIComponent)

热门推荐

ion_L的博客

09-30

1万+

1、encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有字符(可看下表的非转义字符更清晰)。注意：为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。 var x = encodeURIComponent("https://baidu.com/a(-_.!~*')1"...

url中文传参乱码解决办法

weixin_45877627的博客

11-14

357

3中解决中文传参乱码问题第一种：方法1:进行URL编码encodeURI(encodeURI("${ctx}/sys/user/listoffice.id="+id+"&office.name="+treeNode.name)) 后台解码 user.getOffice().setName(java.net.URLDecoder.decode(user.getOffice().getNa...

vue axios采用formdata传参后端springboot接收中文乱码解决办法

weixin_42161320的博客

03-01

5140

vue axios采用formdata传参后端springboot接收中文乱码解决办法....有些思路没有测，毕竟只是做项目，不是做科研。先说说失败的方法，后附两条成功的方法。3，在jwtfilter中修改request接收参数格式（失败）1，硬改接收参数编码（成功，但不是全局的，仅能解决燃眉之急）6，后端编写全局过滤器，设置request请求编码格式；子类StringHttpMessageConverter。2，编写全局编码转换器（成功，最终采用的也是这个）2，前端转换下格式（没测试，就不具体写了）

<a>标签传值乱码问题

wxl1990721的专栏

06-17

5948

今天遇到这个问题，纠结了好久，在网上查了半天，各种办法都试了，依旧乱码啊看着一个个？号，心拔凉拔凉滴不过刚刚看到一个，嘿嘿，试了试，成功：【原文：http://www.docin.com/p-605373817.html】 String testpara=new String(para.getBytes("ISO-8859-1"),"utf-8"); //后台转换一下就OK啦

命名式vue路由传参的踩坑

weixin_30377461的博客

05-17

155

2018-05-17 最近在重构之前写的electron-vue项目，发现以前老是滥用vuex传值，于是想重新整理项目中的数据传递过程，然后在命名式导航上踩了个坑~~~~~~~~~ 命名式导航用query传参，路由地址可以用path指定，但是要用params传参的时候必须用name指定目标组件名，否则无法在$route上获取参数 <router-link :to="{path:...

springmvc接受vue请求中文参数乱码解决方案

Localtrant的博客

01-26

343

前端将vue项目打包成apk后安装到鸿蒙pad上后，后端接受到的中文请求参数都变成了?我当时是蒙蔽的，因为这个项目之前是安装到IOS系统上的，运行一切正常，为啥同一个后台服务打包成apk就无效了呢？这时我开始怀疑是不是前端请求编码没设置好，直到我用Wireshark抓取了请求，发现前端传值也是正确的，那我就只能从后端找问题了。问题虽然解决了，但我有一点想不通，为啥GET请求在IOS系统上就不乱码呢？于是我开始查看项目中的各种编码配置，发现都配置了UTF-8编码，看起来没什么问题。之后，问题就解决了。