实现 URL 编解码 工具

分类：developer ｜ 标签：URL、编码、解码、参数 encodeURI / encodeURIComponent 与对应解码，方便构造带参链接

2.1 功能说明

encodeURI / encodeURIComponent 与对应解码，方便构造带参链接

核心能力

• encode
• decode
• component
• uri

2.1.1 使用指南

URL 编解码使用指南

两种编码的区别

• encodeURIComponent / decodeURIComponent：编码范围更广，会编码 & = + / ? # 等保留字符，用于编码「单个参数值」。
• encodeURI / decodeURI：保留 :/?&=# 等，用于编码「整条 URL」，不会破坏结构。

典型场景

构造带中文或特殊字符的链接、调试接口参数、还原被编码的查询串。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• getFn()
• process()
• swapMode()
• clearAll()
• copy()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'

const mode = ref('encode')
const variant = ref('component')
const input = ref('')
const output = ref('')
const error = ref('')

function getFn() {
  return variant.value === 'component'
    ? (mode.value === 'encode' ? encodeURIComponent : decodeURIComponent)
    : (mode.value === 'encode' ? encodeURI : decodeURI)
}

function process() {
  error.value = ''
  output.value = ''
  if (!input.value) return
  try {
    output.value = getFn()(input.value)
  } catch (e) {
    error.value = '处理失败：' + e.message
  }
}

function swapMode() {
  if (output.value && !error.value) input.value = output.value
  mode.value = mode.value === 'encode' ? 'decode' : 'encode'
  output.value = ''
  error.value = ''
  process()
}

function clearAll() {
  input.value = ''
  output.value = ''
  error.value = ''
}

async function copy(text) {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制')
  } catch {
    ElMessage.warning('复制失败，请手动复制')
  }
}

2.3 效果截图

暂未生成该工具的效果截图。

工具访问地址：https://www.i91tools.com/tools/url-codec