<think>我们正在讨论如何在Vue中
获取当前
URI。根据引用[1]和引用[3]，我们可以通过VueRouter的路由对象来
获取当前路由的路径（path）或完整路径（fullPath）。在Vue组件中，我们可以通过`this.$route`（在Vue2中）或使用`useRoute`组合式函数（在Vue3中）来访问当前路由对象。具体方法如下：###1.
获取当前
URI（路径）-**$route.path**：返回当前路由的路径（不包含查询
参数和hash），例如：`/book/123`-**$route.fullPath**：返回完整的URL（包含查询
参数和hash），例如：`/book/123?name=vue`###2.在Vue组件中的使用方式####Vue2选项式API```vue<template><div><p>当前路径:{{$route.path}}</p><p>完整路径:{{$route.fullPath}}</p></div></template><script>exportdefault{mounted(){console.log('当前路径:',this.$route.path);console.log('完整路径:',this.$route.fullPath);}}</script>```####Vue3组合式API（使用`useRoute`）```vue<template><div><p>当前路径:{{route.path}}</p><p>完整路径:{{route.fullPath}}</p></div></template><script>import{useRoute}from'vue-router';exportdefault{setup(){constroute=useRoute();console.log('当前路径:',route.path);console.log('完整路径:',route.fullPath);return{route};}}</script>```###3.在Vue组件外部
获取如果需要在Vue组件外部（例如在store或工具函数中）
获取当前
URI，可以通过VueRouter实例的`currentRoute`属性（注意：在VueRouter4中，`currentRoute`是一个ref对象，需要访问其value）：```javascriptimportrouterfrom'./router';//根据你的路由文件路径导入//
获取当前路由对象constcurrentRoute=router.currentRoute;//在VueRouter4中，currentRoute是一个ref，所以需要.valueconsole.log('当前路径:',currentRoute.value.path);console.log('完整路径:',currentRoute.value.fullPath);```###4.关于
URI编码引用[3]提到，有时需要对
获取的路径进行编码，以防止特殊字符引起的问题。可以使用`encode
URIComponent`对路径进行编码：```javascriptconstfullPath=encode
URIComponent(router.currentRoute.value.fullPath);```###注意事项：-在组件中使用`$route`或`useRoute`时，确保已经安装了VueRouter并正确配置。-当路由变化时，`$route`对象是响应式的，因此可以监听它的变化或者使用计算属性基于路由信息进行计算。-在VueRouter4中，`router.currentRoute`是一个ref对象，所以需要`.value`来访问其属性。以上就是在Vue中
获取当前
URI的方法，根据你的具体需求选择使用`path`或`fullPath`。§§相关问题§§1.VueRouter中如何监听路由变化？2.VueRouter4与VueRouter3有哪些主要区别？3.如何在Vue中
获取URL查询
参数？4.VueRouter的导航守卫如何使用？</think>在 Vue 中
获取当前
URI 有多种方法，主要通过 Vue Router 的路由对象实现。以下是具体解决方案：
### 1. 在 Vue 组件模板中直接
获取
```vue
<template>
<div>
<p>当前路径: {{ $route.path }}</p>
<p>完整
URI: {{ $route.fullPath }}</p>
<p>包含
参数: {{ $route.params }}</p>
</div>
</template>
```
### 2. 在组件脚本中
获取
```javascript
// Vue 2 选项式 API
export default {
mounted() {
console.log("当前路径:", this.$route.path);
console.log("完整
URI:", this.$route.fullPath);
console.log("查询
参数:", this.$route.query);
console.log("路由
参数:", this.$route.params);
}
}
// Vue 3 组合式 API
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
console.log("当前路径:", route.path);
console.log("完整
URI:", route.fullPath);
return { route };
}
}
```
### 3. 在 Vue Router 导航守卫中
获取
```javascript
// 全局前置守卫
router.beforeEach((to, from) => {
console.log("前往的
URI:", to.fullPath);
console.log("来自的
URI:", from.fullPath);
});
// 路由独享守卫
const routes = [{
path: '/user/:id',
beforeEnter: (to) => {
console.log("进入用户页面的
URI:", to.fullPath);
}
}]
```
### 4. 在 Vue 组件外部
获取
```javascript
// 在 JS 文件中
获取当前
URI
import router from './router';
const current
URI = router.currentRoute.value.fullPath;
console.log("当前完整
URI:", current
URI);
// 带编码处理（处理特殊字符）
const encoded
URI = encode
URIComponent(router.currentRoute.value.fullPath);
console.log("编码后的
URI:", encoded
URI);
```
### 关键属性说明：
| 属性 | 描述 | 示例 |
|------|------|------|
| `$route.path` | 当前路由路径（不含查询
参数） | `/book/123` |
| `$route.fullPath` | 完整路径（含查询
参数和 hash） | `/book/123?page=2#section` |
| `$route.params` | 动态路径
参数对象 | `{ id: '123' }` |
| `$route.query` | URL 查询
参数对象 | `{ page: '2' }` |
### 注意事项：
1. **编码处理**：当
URI 包含特殊字符时，使用 `encode
URIComponent()` 处理[^3]
2. **响应式更新**：路由属性是响应式的，可结合 `watch` 监听变化
3. **Vue Router 版本**：
- Vue 2 使用 Vue Router 3.x：`this.$route`
- Vue 3 使用 Vue Router 4.x：`useRoute()` 或 `router.currentRoute.value`
> 示例：监听路由变化并
获取 URI
> ```javascript
> watch: {
> '$route'(to) {
> console.log('
URI变化为:', to.fullPath);
> // 执行路由变更逻辑
> }
> }
> ```
扫一扫
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
