问题：如何在uniapp小程序中获取当前页面路由地址？

Question

在 UniApp 小程序开发过程中，开发者常常需要获取当前页面的路由地址，以实现页面跳转、权限控制或数据统计等功能。然而，由于小程序平台的限制和 UniApp 框架的封装，许多开发者对如何正确获取当前页面的路由路径感到困惑。本文将介绍几种常见方法，包括使用 `getCurrentPages()` 获取页面栈信息、结合页面生命周期函数以及通过全局状态管理等方式，帮助开发者准确获取当前页面的路由地址，并适配不同平台的小程序环境。

Answer 1

在 UniApp 小程序中获取当前页面路由路径的深度解析与实践方法

在 UniApp 开发过程中，开发者常常需要获取当前页面的路由地址，以实现页面跳转、权限控制或数据统计等功能。然而，由于小程序平台的限制和 UniApp 框架的封装，许多开发者对如何正确获取当前页面的路由路径感到困惑。

一、问题背景

UniApp 是一套使用 Vue.js 编写一次，多端部署的开发框架。它支持编译到 iOS、Android、H5 以及各类小程序平台（如微信、支付宝、百度、字节跳动等）。不同平台对于页面栈管理机制存在差异，因此获取当前页面路由的方式也有所不同。

二、常见方法分析

1. getCurrentPages() 获取页面栈信息

2. 这是 UniApp 官方提供的 API，用于获取当前页面栈实例数组。每个页面对象包含 route 属性，表示该页面的路由路径。

   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
   const route = currentPage.route;
   console.log('当前页面路由：', route);

   注意：route 不包括路径前缀和参数，只返回页面路径字符串。

3. 结合页面生命周期函数获取路径

4. 可以在 onLoad 或 onShow 生命周期中通过 options 参数获取传入的参数，同时也可以记录当前页面路径。

   export default {
       onLoad(options) {
           console.log('页面路径:', this.$mp.page.route);
           console.log('传参:', options);
       }
   }

   此方式适用于页面加载时获取路径及参数。

5. 全局状态管理（如 Vuex）记录路径

6. 利用 Vuex 等状态管理工具，在每次页面切换时更新全局 store 中的当前路径。

   // store.js
   state: {
       currentRoute: ''
   },
   mutations: {
       setCurrentRoute(state, route) {
           state.currentRoute = route;
       }
   }
   
   // 页面中调用
   this.$store.commit('setCurrentRoute', this.$mp.page.route);

   这种方式适合跨页面共享路由状态，便于权限判断或埋点追踪。

三、适配不同平台的注意事项

平台	支持 getCurrentPages()	支持 $mp.page.route	特殊说明
微信小程序	✅	✅	需注意 App 和 Page 的上下文差异
支付宝小程序	✅	✅	部分 API 名称略有不同
H5	✅	❌	可通过 this.$route.path 获取
百度小程序	✅	✅	兼容性良好

四、流程图展示

graph TD
            A[开始] --> B{是否在页面中?}
            B -- 是 --> C[调用 getCurrentPages()]
            B -- 否 --> D[通过其他上下文获取]
            C --> E[获取当前页面对象]
            E --> F[读取 route 属性]
            F --> G[输出当前路由路径]
            D --> H[根据平台特性处理]

五、进阶技巧与最佳实践

• 在页面基类中统一封装获取路径的方法，提升复用性。
• 使用拦截器或插件自动记录页面访问路径，便于日志分析。
• 对于多端项目，建议编写适配层统一接口，屏蔽平台差异。
• 避免频繁调用 getCurrentPages()，防止性能损耗。
• 在 H5 平台中结合 Vue Router 提供更丰富的导航能力。