小程序获取当前页面路由

最新推荐文章于 2024-08-23 17:57:13 发布

原创最新推荐文章于 2024-08-23 17:57:13 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #js #javascript #vue #小程序

小程序开发技巧专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了在前端开发中获取当前页面栈实例的方法——getCurrentPages()。这个函数返回一个数组，包含从首页到当前页面的实例，最后一个元素即为当前页面。通过示例代码展示了如何获取并使用当前页面实例。

获取当前页面栈的实例取最后一个元素

getCurrentPages() 函数用于获取当前页面栈的实例，
以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

let pages = getCurrentPages();
let currPage = null;
if (pages.length) {
   currPage = pages[pages.length - 1];
}
console.log(currPage)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

薛定喵君

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

微信小程序开发中的路由与页面跳转方法

2401_85258012的博客

06-03

927

在小程序中，一个完整的应用是由多个页面组成的。使用redirectTo方法进行页面跳转后，当前页面的生命周期函数onUnload将会被触发，而新页面的生命周期函数onLoad和onShow将会被触发。相对路径是相对于当前页面的路径，以“../”或“./”开头，表示跳转到当前页面的某个子页面。在上述的路由方法中，我们都会传递一个url参数来指定目标页面的路径，这个参数是非常重要的。需要注意的是，每个页面的生命周期函数只有在页面被打开时才会触发，如果页面已经打开过，再次跳转到该页面时不会触发生命周期函数。

【微信小程序】页面与路由-页面路由

墨夶的博客

11-18

1214

微信小程序的页面路由系统提供了丰富的功能和灵活的配置选项，帮助开发者实现高效的页面管理和用户导航。通过合理使用不同的路由类型、监听路由事件以及封装路由管理器，可以显著提升小程序的用户体验和开发效率。希望本文对你的微信小程序开发有所帮助。😊。

参与评论您还未登录，请先登录后发表或查看评论

小程序：通过getCurrentPages获取当前页面路由信息

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

06-08

4666

通过函数我们可以获取到当前页面路由信息，但是获取到的是一个路由栈，包含你跳转的所有路由。如下：比如我从A页面跳到B页面，就会有两条路由数据，0就是A页面，1就是B页面。如果我们只想看当前路由怎么办呢，可以简单封装一下。这里我封装了两个函数 miniTools.js 效果直接在开发者工具运行就能看到效果...

微信小程序——获取当前页面路由

热门推荐

xiasohuai的博客

11-20

1万+

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。 let pages = getCurrentPages(); let currPage = null; if (pages.length) { currPage = pages[pages.length - 1]; } console.log(currP...

微信小程序之页面路由

小隐的博客

04-18

859

页面路由在小程序中所有页面的路由全部由框架进行管理。页面栈框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：路由方式页面栈表现初始化新页面入栈打开新页面新页面入栈页面重定向 当前页面出栈，新页面入栈页面返回页面不断出栈，直到目标返回页 Tab 切换页面全部出栈，只留下新的 Tab 页面重加载页面全部出栈，...

小程序的路由

dd602350527的博客

05-07

875

小程序的路由一、回顾vue路由 vue-router 标签： JS：this.$rourer.push(’/home’) 二、小程序路由有两种实现方式：说明：open-type 指定跳转方式:与JS跳转方式一一对应值说明 navigate 对应 wx.navigateTo redirect 对应 wx.redirectTo 的功能 switchTab 对应 wx.switc...

小程序之页面路由（页面栈）

qq_39441438的博客

12-29

1377

页面栈是以栈的形式维护页面与页面之间的关系，遵循栈的原则，先进后出，在微信小程序中有getCurrentPages()函数获取页面栈。在开发的时候吗，可以通过getCurrentPages()函数获取页面栈 let pages = getCurrentPages() let currPage = pages[pages.length - 1]; //当前页面 let prevPage = pages[pages.length - 2]; //上一个页面也可以通过这个函数判断是否有上一个页面栈，

微信小程序页面路由demo

04-24

页面路由是小程序中一个核心的概念，它关乎着用户在小程序内的导航流程。在这个"微信小程序页面路由demo"中，我们将深入探讨这一主题。首先，我们要理解什么是页面路由。在计算机科学中，路由通常指的是网络数据包...

微信小程序路由详解

weixin_72724407的博客

08-25

1252

微信小程序页面路由，根据路由规则（路径）从一个页面跳转到另一个页面的的规则。保留当前页面，跳转到应用内的某个页面。关闭当前页面，跳转到应用内的某个页面。

小程序路由传参和获取页面栈方法

m0_69876298的博客

08-23

693

微信小程序路由传参和获取页面栈方法

微信小程序开发获取页面路由信息

chenzhezhong的博客

11-29

1708

【代码】微信小程序开发获取页面路由信息。

微信小程序路由页面栈简述

argleary的博客

05-11

1348

微信小程序目前有以下几种页面跳转方式： switchTab : 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 reLaunch : 关闭所有页面，打开到应用内的某个页面 redirectTo : 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 navigateTo : 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 ...

小程序获取当前页面栈及应用

零凌林的博客

07-01

1594

本文主要记录了小程序获取当前页面栈的方式以及如何应用，希望可以给大家后续开发带来更多的思路

微信小程序开发（四）：小程序的页面跳转与路由

Dominic_W的博客

03-28

1977

小程序中的路由跳转 wx.navigateTo(Object object) 1、wx.navigateTo()是最普通的一种路由跳转方法，目标页面可以是除tabbar页面外的其他页面 2、使用wx.navigateTo()跳转页面后，当前页面会保存到小程序的页面栈中;可以使用wx.navigateBack方法返回到当前页面 wx.reLaunch(Object object) 1、跳转到目标url页面 2、关闭其他所有页面 wx.switchTab(Object object) 1、wx.switchTa

uni-app路由

上庸者-不服周

11-02

5615

uni-app。

【微信小程序】获取小程序当前页面url、当前路径

奔跑的搬运工

03-28

6677

获取当前页面 路径 +参数。获取微信小程序当前页面路径。

uniapp，转微信小程序，获取当前页面的路由、路由参数

学习笔记

11-23

3227

uniapp 获取当前路由信息跟 vue 不同，它没有 route 对象。

微信小程序(路由)几种页面的跳转方式

望天吼

01-02

1867

wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.reLaunch(Object object) 关闭所有页面，打开到应用内的某个页面 wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 wx.navigateTo(Object obje...

解决uni-app里面的小程序获得当前路由

胡图图不糊涂的博客

10-06

3312

项目场景：在uni-app里面编写小程序 问题描述：在uni-app的H5端可以拿到当前页面栈的FullPath，但是App端（小程序）就是undefined了： this.$route.fullPath 小程序错误如下：解决方案：用如下的方式即可： let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面 let page = pages[pages.length

小程序获取当前页面的url

最新发布

12-05

<think> 我们正在讨论如何在小程序中获取当前页面的URL。根据用户提供的引用内容，我们可以总结出两种主要方法：一种是获取当前页面的基本路由（不带参数），另一种是获取带参数的完整URL。 ### 方法1：获取当前页面基本路由（不带参数） ```javascript function getCurrentPageUrl() { const pages = getCurrentPages(); // 获取页面栈数组 const currentPage = pages[pages.length - 1]; // 当前页面实例 return currentPage.route; // 返回当前页面的路由路径（字符串） } ``` ### 方法2：获取当前页面带参数的完整URL ```javascript function getCurrentPageUrlWithArgs() { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; const url = currentPage.route; const options = currentPage.options; // 页面参数对象 // 如果没有参数，直接返回路由路径 if (!options || Object.keys(options).length === 0) { return url; } // 拼接参数 let urlWithArgs = url + '?'; for (let key in options) { const value = options[key]; urlWithArgs += `${key}=${value}&`; } // 去掉最后一个多余的'&' return urlWithArgs.substring(0, urlWithArgs.length - 1); } ``` ### 使用示例将上述函数放入`utils`目录下的一个文件中（例如`path.js`），然后导出： ```javascript // utils/path.js module.exports = { getCurrentPageUrl, getCurrentPageUrlWithArgs }; ``` 在页面中引入并使用： ```javascript const pathUtil = require('../../utils/path'); Page({ onShow() { const currentUrl = pathUtil.getCurrentPageUrl(); // 获取当前页面路由 const currentUrlWithArgs = pathUtil.getCurrentPageUrlWithArgs(); // 获取带参数的URL console.log('当前页面路由:', currentUrl); console.log('当前页面完整URL:', currentUrlWithArgs); } }); ``` ### 注意事项 1. **执行时机**：`getCurrentPages()`只能在页面栈已经存在的情况下调用，因此不能在`App`的`onLaunch`中调用（此时页面栈为空）。 2. **参数编码**：如果参数值包含特殊字符（如`&`, `=`等），可能需要使用`encodeURIComponent`进行编码，但注意小程序框架在`options`中会自动解码，重新拼接时如果原样输出可能不符合URL规范。如果需要严格的URL，可以手动编码： ```javascript urlWithArgs += `${key}=${encodeURIComponent(value)}&`; ``` 3. **页面栈限制**：小程序页面栈最多10层，当页面栈深度较大时，获取页面栈的操作不会失败，但需要注意性能。 ### 相关问题 1. 如何在小程序启动时（App.onLaunch）获取当前页面URL？ 2. 如何监听页面URL参数的变化？ 3. 小程序页面栈在什么情况下会被清空？ 4. 如何获取上一个页面的URL？ 5. 小程序中如何解析URL参数？ > 通过以上方法，我们可以方便地获取当前页面的URL信息。在实际开发中，建议将URL工具函数封装在公共模块中以便复用[^1][^2]。 </think> 根据微信小程序开发文档和提供的参考信息，获取当前页面URL的方法主要有两种方式： ### 方法一：获取当前页面基本路由（不带参数） ```javascript // utils/routeUtils.js function getCurrentPageUrl() { const pages = getCurrentPages(); // 获取页面栈数组 const currentPage = pages[pages.length - 1]; // 获取当前页实例 return currentPage.route; // 返回当前页面路由路径 } ``` ### 方法二：获取带参数的完整URL ```javascript // utils/routeUtils.js function getCurrentPageUrlWithArgs() { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; const baseUrl = currentPage.route; const params = currentPage.options || {}; // 拼接URL参数 let queryString = ''; Object.keys(params).forEach((key, index) => { queryString += `${index === 0 ? '?' : '&'}${key}=${encodeURIComponent(params[key])}`; }); return baseUrl + queryString; } module.exports = { getCurrentPageUrl, getCurrentPageUrlWithArgs }; ``` ### 使用示例 ```javascript // 页面JS文件中 const routeUtils = require('../../utils/routeUtils'); Page({ onShow() { // 获取基础URL const baseUrl = routeUtils.getCurrentPageUrl(); console.log('当前页面路径:', baseUrl); // 输出: pages/index/index // 获取带参数URL const fullUrl = routeUtils.getCurrentPageUrlWithArgs(); console.log('完整URL:', fullUrl); // 输出: pages/index/index?id=123&name=test } }) ``` ### 关键说明 1. **`getCurrentPages()`** 是微信小程序提供的全局方法，返回当前页面栈的数组 2. **`route`属性** 包含当前页面的路径（不含参数） 3. **`options`属性** 包含URL中的查询参数对象 4. **页面栈顺序**：数组最后一个元素($\text{pages}[n-1]$)是当前页面 ### 注意事项 1. **执行时机**：只能在页面生命周期函数中调用，不能在`App.onLaunch`中使用 2. **参数编码**：使用`encodeURIComponent`确保特殊字符正确处理 3. **页面栈限制**：小程序页面栈最多10层（引用[4]） 4. **Tab页面**：切换Tab页会清除非Tab页面栈（引用[4]） > 封装成工具函数后，可在多个页面复用此功能，避免重复代码[^1][^2]。 ### 相关问题 1. 如何在小程序启动时（App.onLaunch）获取当前页面URL？ 2. 如何监听页面URL参数的变化？ 3. 小程序页面栈在什么情况下会被清空？ 4. 如何获取上一个页面的URL？ 5. 小程序中如何解析URL参数？