1. 问题描述
在el-table中的记录列表中放置了一个 操作按钮，点这个按钮时可以新增一个tab页签,并将通过路由传参方式将一些信息传递到新打开的tab页签中，但发现传递中文参数时会出现 Failed to execute 'setRequestHeader' on 'XMLHttpRequest': String contains non ISO-8859-1 code point.的错误，如下
1.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-column
label="操作" 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>
1.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.params
if (routeParams) {
this.info.id = routeParams.configId
this.info.vueModuleName = routeParams.moduleName
}
}
};
</script>
1.3. 出现的错误
信息提示
浏览器控制台打印
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)
2.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-column
label="操作" 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.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.params
if (routeParams) {
this.info.id = routeParams.configId
//这里通过 decodeURIComponent(routeParams.moduleName) 对路由中的moduleName参数值进行解码，解决中文问题
this.info.vueModuleName = decodeURIComponent(routeParams.moduleName)
}
}
};
</script>
以上就是Vue2路由跳转传参中文问题处理方案的详细内容，更多关于Vue2路由跳转传参的资料请关注本站其它相关文章！
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » Vue2路由跳转传参中文问题处理方案
发表评论 取消回复