uniapp获取当前页面路径
时间: 2025-07-06 20:58:58 浏览: 12
### 如何在 UniApp 中获取当前页面的完整路径或路由
在 UniApp 应用程序中,可以通过多种方式来获取当前页面的路径或路由。以下是几种常用的方法:
#### 方法一:通过 `getCurrentPages()` 获取当前页面路径
`getCurrentPages()` 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
```javascript
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let currentPage = routes[routes.length - 1].route; // 获取当前页面路径[^1]
console.log('当前页面路径:', currentPage);
```
此方法适用于大多数场景,并能提供简洁的结果。
#### 方法二:使用 `$mp.page.route` 属性
对于组件化开发模式下的页面,可以直接访问 Vue 实例中的 `$mp.page.route` 来获得当前页面路径。
```javascript
let currentPage = this.$mp.page.route;
console.log('当前页面路径:', currentPage);
```
这种方法更加便捷,在特定情况下可以减少代码量并提高可读性。
#### 方法三:封装成工具函数以便全局调用
为了方便项目内各处调用以及维护统一逻辑,建议创建一个公共 JavaScript 文件并将上述功能封装起来作为工具函数。
```javascript
function getCurrentRouter() {
let routes = getCurrentPages();
let curRoute = routes[routes.length - 1].route;
const pageId = routes[routes.length - 1].options.id || '';
const pageUrl = '/' + curRoute + (pageId ? ('?id=' + pageId) : '');
return pageUrl;
}
// 使用示例
console.log(getCurrentRouter());[^2]
```
该实现不仅能够得到完整的 URL 路径,还可以附加查询参数(如果存在的话),从而更好地满足实际需求。
#### 方法四:利用 `$page.fullPath` 访问更详细的路由信息
除了基本的路径外,有时候还需要知道整个 URL 的全貌,这时就可以借助于 `$page.fullPath` 属性。
```javascript
let pages = getCurrentPages();
console.log('当前页面的完整URL:', pages[pages.length - 1].$page.fullPath);[^4]
```
这种方式特别适合处理复杂的导航结构或是需要记录用户行为轨迹的应用场合。
阅读全文
相关推荐


















