<think>我们正在使用Vue 3，需要
获取浏览器地址和携带的
参数。根据引用，有两种主要方式：路由
参数（在
路径中）和查询
参数（在?后面）。在Vue 3中，我们可以使用Vue Router来
获取，也可以使用原生的URLSearchParams或正则匹配。
根据引用[3]，Vue3中可以通过路由配置来
获取路径参数（如/:code）。而查询
参数（如?key=value）则可以通过路由对象的currentRoute.value.query或原生的window.location
获取。
因此，我们有两种情况：
1.
获取路由
参数（动态
路径参数）：需要在路由定义中设置，如`path: '/user/:id'`，然后通过`route.params.id`
获取。
2.
获取查询
参数（URL
参数）：通过`route.query.key`
获取，或者使用原生方法（当没有使用路由时）。
在Vue3中，我们通常使用Vue Router，因此推荐使用路由的hook来
获取参数。
具体步骤：
1. 在组件中引入Vue Router的useRoute钩子。
2. 调用useRoute()
获取当前路由对象。
3. 从route.params中
获取路径参数，从route.query中
获取查询
参数。
如果没有使用Vue Router，或者需要
获取完整的URL，可以使用
浏览器原生的window.location对象。
下面分别给出示例：
</think>### Vue 3
获取浏览器地址和
参数的完整指南
在 Vue 3 中
获取浏览器地址和
参数，主要有两种方式：**路由
参数**（动态
路径）和**查询
参数**（URL 问号后的
参数）。以下是具体实现方法：
---
### 一、
获取路由
参数（动态
路径参数）[^3][^4]
适用于形如 `https://domain.com/user/123` 的 URL 格式：
```
javascript
// router/index.
js
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/user/:id', // 定义动态
参数":id"
component: () => import('./views/User.vue')
}
]
})
```
```vue
<!-- User.vue -->
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const userId = route.params.id //
获取参数值（如123）
</script>
<template>
<div>用户ID: {{ userId }}</div>
</template>
```
---
### 二、
获取查询
参数（URL
参数）[^1][^2]
适用于形如 `https://domain.com/search?keyword=vue&page=1` 的 URL：
```vue
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const params = route.query //
获取参数对象
console.log(params.keyword) // "vue"
console.log(params.page) // "1"
</script>
```
---
### 三、
不使用路由
获取参数（原生方法）
当需要
获取当前
页面完整URL或非路由
页面参数时：
```vue
<script setup>
import { onMounted } from 'vue'
//
获取完整URL
const fullURL = window.location.href // https://domain.com?test=abc
// 解析查询
参数（推荐方法）
const getQueryParams = () => {
const params = new URLSearchParams(window.location.search)
return Object.fromEntries(params.entries())
}
onMounted(() => {
const urlParams = getQueryParams()
console.log(urlParams.test) // "abc"
})
</script>
```
---
### 四、处理特殊字符和编码
当
参数包含特殊字符（如空格、中文）时：
```
javascript
// 解码
参数（处理%20等编码）
const decodedParam = decodeURIComponent(route.query.param)
// 编码
参数（跳转时使用）
const encodedValue = encodeURIComponent('带空格的值')
router.push(`/path?data=${encodedValue}`)
```
---
### 五、三种方法对比
| **方法** | **适用场景** | **优点** | **缺点** |
|------------------------|------------------------------|-----------------------------------|------------------------|
| `route.params` |
路径参数 `/user/:id` |
参数结构化，SEO友好 | 需要预定义路由 |
| `route.query` | 查询
参数 `?key=value` | 灵活，无需预定义 |
参数暴露在URL中 |
| `URLSearchParams` | 非路由
页面或完整URL解析 |
不依赖Vue Router，纯
浏览器API | 需要手动处理 |
---
### 示例：综合
获取路径和查询
参数
```vue
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
//
路径参数（如 /product/42）
const productId = route.params.id
// 查询
参数（如 ?color=red）
const color = route.query.color
// 完整URL
const fullURL = window.location.href
</script>
```
> **最佳实践**：优先使用 `useRoute()`
获取参数，仅在非路由
页面使用原生方法[^1][^2]。
参数包含
JSON时使用 `
JSON.parse(decodeURIComponent(param))` 解析对象[^1]。
---
扫一扫
4599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
