Vue2路由跳转传参中文问题处理方案_Vue.js

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路由跳转传参的资料请关注代码网其它相关文章！