快捷導(dǎo)航

Vue2路由跳轉(zhuǎn)傳參中文問題處理方案

更新時(shí)間：2024年05月09日 16:19:12 作者：小袁搬碼

在el-table中的記錄列表中放置了一個(gè) 操作按鈕,點(diǎn)這個(gè)按鈕時(shí)可以新增一個(gè)tab頁簽,并將通過路由傳參方式將一些信息傳遞到新打開的tab頁簽中,但發(fā)現(xiàn)傳遞中文參數(shù)時(shí)會(huì)出現(xiàn)報(bào)錯(cuò),所以本文給大家介紹了Vue2路由跳轉(zhuǎn)傳參中文問題處理方案,需要的朋友可以參考下

1. 問題描述

在el-table中的記錄列表中放置了一個(gè) 操作按鈕，點(diǎn)這個(gè)按鈕時(shí)可以新增一個(gè)tab頁簽,并將通過路由傳參方式將一些信息傳遞到新打開的tab頁簽中，但發(fā)現(xiàn)傳遞中文參數(shù)時(shí)會(huì)出現(xiàn) Failed to execute 'setRequestHeader' on 'XMLHttpRequest': String contains non ISO-8859-1 code point.的錯(cuò)誤，如下

1.1. 當(dāng)前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="設(shè)置"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: "ConfigIndex",
  data() {
    return {
      loading: false
    };
  },
 
  methods: {
    /** 設(shè)置按鈕操作 */
    handleSetting(row) {
      console.log(row)
      const configId = row.id;
      const moduleName = row.moduleName; //有中文內(nèi)容，如 "第一個(gè)模塊"
      const params = { pageNum: 2,moduleName};
      //打開新的tab頁面  
      this.$tab.openPage("[" + moduleName + "]模塊配置", '/dev/settingsIndex/index/' + configId+"/"+moduleName, params);
    },
  }
};
</script>
<style lang="scss" scoped></style>

1.2. 跳轉(zhuǎn)到的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() {
    //獲取路由中傳遞的參數(shù)
    const routeParams = this.$route.params
    if (routeParams) {
      this.info.id = routeParams.configId
      this.info.vueModuleName = routeParams.moduleName
    }
  }
  };
</script>

1.3. 出現(xiàn)的錯(cuò)誤

信息提示

在這里插入圖片描述

瀏覽器控制臺(tái)打印

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. 解決方法

原因是在前端跳轉(zhuǎn)頁面時(shí)，url參數(shù)中的內(nèi)容出現(xiàn)了中文。要解決此問題必須對(duì)傳遞中文字符的參數(shù)值進(jìn)行編碼，在接收到參數(shù)后再對(duì)其進(jìn)行解碼即可解決。

JS中通過下面兩個(gè)方法進(jìn)行編碼與解碼操作

編碼：encodeURIComponent(str)
解碼：decodeURIComponent(str)

2.1. 當(dāng)前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="設(shè)置"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: "ConfigIndex",
  data() {
    return {
      loading: false
    };
  },
 
  methods: {
    /** 設(shè)置按鈕操作 */
    handleSetting(row) {
      console.log(row)
      const configId = row.id;
      const moduleName = row.moduleName; //有中文內(nèi)容，如 "第一個(gè)模塊"
      const params = { pageNum: 2,moduleName};
      //打開新的tab頁面,并對(duì)URL中的  moduleName 通過 encodeURIComponent(moduleName)進(jìn)行編碼，解決中文問題
       this.$tab.openPage("[" + moduleName + "]模塊生成配置", '/tool/genSettingsIndex/index/' +configId+"/"+ encodeURIComponent(moduleName), params);
    },
  }
};
</script>
<style lang="scss" scoped></style>

2.2. 跳轉(zhuǎn)到的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====")
    //獲取路由中傳遞的參數(shù)
    const routeParams = this.$route.params
    if (routeParams) {
      this.info.id = routeParams.configId
      //這里通過  decodeURIComponent(routeParams.moduleName) 對(duì)路由中的moduleName參數(shù)值進(jìn)行解碼，解決中文問題
      this.info.vueModuleName = decodeURIComponent(routeParams.moduleName)
    }
  }
  };
</script>

以上就是Vue2路由跳轉(zhuǎn)傳參中文問題處理方案的詳細(xì)內(nèi)容，更多關(guān)于Vue2路由跳轉(zhuǎn)傳參的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: