实现 URL 解析器 工具

分类：developer ｜ 标签：URL、解析、参数、调试 拆解 URL 的协议/主机/端口/路径/参数/哈希

2.1 功能说明

拆解 URL 的协议/主机/端口/路径/参数/哈希

2.1.1 使用指南

使用指导

把完整 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> 中定义的主要函数/方法：

• parse()

2.2.3 关键实现代码

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

import { ref, reactive, computed } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const url = ref('')
const err = ref('')
const parts = reactive({ protocol: '', host: '', port: '', pathname: '', hash: '', query: {} })

function parse() {
  err.value = ''
  Object.assign(parts, { protocol: '', host: '', port: '', pathname: '', hash: '', query: {} })
  const u = url.value.trim()
  if (!u) return
  let p
  try { p = new URL(u) } catch (e) { err.value = 'URL 无效：' + e.message; return }
  parts.protocol = p.protocol
  parts.host = p.hostname
  parts.port = p.port
  parts.pathname = p.pathname
  parts.hash = p.hash
  const q = {}
  p.searchParams.forEach((v, k) => { q[k] = v })
  parts.query = q
}

const queryRows = computed(() => Object.entries(parts.query).map(([k, v]) => ({ k, v })))

2.3 效果截图

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