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

1. 问题描述

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

1. 当前vue组件

<template><div class="app-container"><el-table :data="tableData.records" :key="tableKey" @cell-click="cellClick" size="small"@filter-change="filterChange" @selection-change="onSelectChange" @sort-change="sortChange"border fit row-key="id" ref="table" style="width: 100%;" v-loading="loading"><el-table-column align="center" type="selection" width="40px" column-key="selectionId":reserve-selection="true"/><el-table-column label="模块名" :show-overflow-tooltip="true"align="center" prop="moduleName"width=""><template slot-scope="scope"><span>{{ scope.row.moduleName }}</span></template></el-table-column><!-- ...... --><el-table-columnlabel="操作" align="center" column-key="operation"class-name="small-padding fixed-width"width="180px"><template slot-scope="{ row }"><i@click="handleSetting(row)"class="el-icon-setting table-operation"style="color: #E6A23C"title="设置"/></template></el-table-column></el-table></div>
</template><script>export default {name: "ConfigIndex",data() {return {loading: false};},methods: {/** 设置按钮操作 */handleSetting(row) {console.log(row)const configId = row.id;const moduleName = row.moduleName; //有中文内容，如 "第一个模块"const params = { pageNum: 2,moduleName};//打开新的tab页面  this.$tab.openPage("[" + moduleName + "]模块配置", '/dev/settingsIndex/index/' + configId+"/"+moduleName, params);},}
};
</script>
<style lang="scss" scoped></style>

2. 跳转到的vue组件

<template><div><!-- ...... --></div>
</template><script>
import BasicInfoForm from "@/views/config/BasicInfoForm.vue";
import ConfigApi from "@/api/genConfig.js";export default {name: "SettingsIndex",components: {BasicInfoForm},data() {return {activeName: "basic",info: {generateType: "0"},dbConfig: {}};},created() {//获取路由中传递的参数const routeParams = this.$route.paramsif (routeParams) {this.info.id = routeParams.configIdthis.info.vueModuleName = routeParams.moduleName}}};
</script>

3. 出现的错误

1. 信息提示

2. 浏览器控制台打印

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 (<anonymous>)at xhrAdapter (xhr.js:12:1)at dispatchRequest (dispatchRequest.js:52:1)

2. 解决方法

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

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

• 编码：encodeURIComponent(str)
• 解码：decodeURIComponent(str)

1. 当前vue组件

<template><div class="app-container"><el-table :data="tableData.records" :key="tableKey" @cell-click="cellClick" size="small"@filter-change="filterChange" @selection-change="onSelectChange" @sort-change="sortChange"border fit row-key="id" ref="table" style="width: 100%;" v-loading="loading"><el-table-column align="center" type="selection" width="40px" column-key="selectionId":reserve-selection="true"/><el-table-column label="模块名" :show-overflow-tooltip="true"align="center" prop="moduleName"width=""><template slot-scope="scope"><span>{{ scope.row.moduleName }}</span></template></el-table-column><!-- ...... --><el-table-columnlabel="操作" align="center" column-key="operation"class-name="small-padding fixed-width"width="180px"><template slot-scope="{ row }"><i@click="handleSetting(row)"class="el-icon-setting table-operation"style="color: #E6A23C"title="设置"/></template></el-table-column></el-table></div>
</template><script>export default {name: "ConfigIndex",data() {return {loading: false};},methods: {/** 设置按钮操作 */handleSetting(row) {console.log(row)const configId = row.id;const moduleName = row.moduleName; //有中文内容，如 "第一个模块"const params = { pageNum: 2,moduleName};//打开新的tab页面,并对URL中的  moduleName 通过 encodeURIComponent(moduleName)进行编码，解决中文问题this.$tab.openPage("[" + moduleName + "]模块生成配置", '/tool/genSettingsIndex/index/' +configId+"/"+ encodeURIComponent(moduleName), params);},}
};
</script>
<style lang="scss" scoped></style>

2. 跳转到的vue组件

<template><div><!-- ...... --></div>
</template><script>
import BasicInfoForm from "@/views/config/BasicInfoForm.vue";
import ConfigApi from "@/api/genConfig.js";export default {name: "SettingsIndex",components: {BasicInfoForm},data() {return {activeName: "basic",info: {generateType: "0"},dbConfig: {}};},created() {console.log("created====")//获取路由中传递的参数const routeParams = this.$route.paramsif (routeParams) {this.info.id = routeParams.configId//这里通过  decodeURIComponent(routeParams.moduleName) 对路由中的moduleName参数值进行解码，解决中文问题this.info.vueModuleName = decodeURIComponent(routeParams.moduleName)}}};
</script>