vue路由传参-如何使用encodeURI加密参数

标题：Vue 路由传参 - 如何使用 encodeURI 加密参数

概述

Vue 路由传参是开发中常用的功能之一，通常我们直接在路由后面带上参数，例如：/blog?id=1。但是在实际应用中，由于参数内容可能包含一些特殊字符，如中文、空格等，因此需要对参数进行编码，以防止路由传参失效。其中，encodeURI() 可以将字符串进行编码，以便在 URI 中使用。

使用 encodeURI 编码传参

下面是一个使用 encodeURI 编码传参的示例，假设需要向 /blog 路由传递一个名称为 title 的参数：

this.$router.push('/blog?title=' + encodeURI('Vue 路由使用'));

在接收参数的页面中，可以通过 this.$route.query.title 获取解码后的参数：

export default {
  mounted() {
    console.log(decodeURI(this.$route.query.title)) // 输出:Vue 路由使用
  }
}

示例1：在路由地址中使用 encodeURI 编码参数

下面对一个实际应用场景进行说明：假设现在有一个搜索页面，用户可以在页面中输入关键字进行搜索。当用户搜索时，需要通过路由跳转到一个展示搜索结果的页面，并将用户输入的关键字作为参数传递过去。

1. 在搜索页面的组件中，可以在点击搜索按钮时，通过 this.$router.push() 进行路由跳转，并在路由地址中使用 encodeURI 对搜索关键字进行编码。代码如下：

<template>
  <div>
    <input type="text" v-model="keyword">
    <button @click="handleSearch">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
    }
  },
  methods: {
    handleSearch() {
    // 通过路由跳转到搜索结果页面，并向路由地址中传递编码后的关键字参数
      this.$router.push(`/search-result?keyword=${encodeURI(this.keyword)}`)
    },
  },
};
</script>

1. 在搜索结果页面组件中，可以通过 this.$route.query.keyword 获取解码后的关键字参数。代码如下：

<template>
  <div>
    <p>搜索关键字：{{keyword}}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取解码后的关键字参数
    this.keyword = decodeURI(this.$route.query.keyword)
  },
  data() {
    return {
      keyword: '',
    };
  },
};
</script>

示例2：在路由对象中使用 encodeURI 编码参数

此处代码仅做示例用，实际生产环境中代码需根据具体需求进行编写。

1. 在需要跳转页面的组件中，可以通过 this.$router.push() 进行路由跳转，并在路由对象的 query 属性中设置编码后的参数。代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <router-link :to="{path:'/book-detail', query: {bookId: encodeURI(item.id), bookName: encodeURI(item.name)}}">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: '1', name: 'Vue.js 权威指南', title: 'Vue.js 权威指南' },
        { id: '2', name: '深入浅出 webpack', title: '深入浅出 webpack' },
      ],
    }
  },
};
</script>

1. 在路由获取页面组件中，可以通过 this.$route.query 获取路由对象中的参数。代码如下：

<template>
  <div>
    <p>书籍 ID：{{ bookId }}</p>
    <p>书籍名称：{{ bookName }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取解码后的参数
    this.bookId = decodeURI(this.$route.query.bookId)
    this.bookName = decodeURI(this.$route.query.bookName)
  },
  data() {
    return {
      bookId: '',
      bookName: '',
    };
  },
};
</script>

以上就是使用 Vue 路由传参时，如何使用 encodeURI() 进行参数编码的完整攻略，包括了两个实际应用场景的示例说明。