vue2路由跳转传参中文问题处理方案-kb88凯时官网登录

来自:网络
时间:2024-06-10
阅读:

1. 问题描述

在el-table中的记录列表中放置了一个 操作按钮,点这个按钮时可以新增一个tab页签,并将通过路由传参方式将一些信息传递到新打开的tab页签中,但发现传递中文参数时会出现 failed to execute 'setrequestheader' on 'xmlhttprequest': string contains non iso-8859-1 code point.的错误,如下

1.1. 当前vue组件



1.2. 跳转到的vue组件


1.3. 出现的错误

信息提示

vue2路由跳转传参中文问题处理方案

浏览器控制台打印

xhr.js:126  uncaught (in promise) typeerror: failed to execute 'setrequestheader' on 'xmlhttprequest': string contains non iso-8859-1 code point.
    at setrequestheader (xhr.js:126:1)
    at object.foreach (utils.js:238:1)
    at dispatchxhrrequest (xhr.js:120:1)
    at new promise ()
    at xhradapter (xhr.js:12:1)
    at dispatchrequest (dispatchrequest.js:52:1)

2. 解决方法

原因是在前端跳转页面时,url参数中的内容出现了中文。要解决此问题必须对传递中文字符的参数值进行编码,在接收到参数后再对其进行解码即可解决。

js中通过下面两个方法进行编码与解码操作

  • 编码:encodeuricomponent(str)
  • 解码:decodeuricomponent(str)

2.1. 当前vue组件



2.2. 跳转到的vue组件


以上就是vue2路由跳转传参中文问题处理方案的详细内容,更多关于vue2路由跳转传参的资料请关注其它相关文章!

返回顶部
顶部
网站地图