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

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-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>

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>

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-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. 跳转到的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>