uniapp组件里的onLoad和onShow里的方法不执行

最新推荐文章于 2025-10-17 11:18:32 发布

原创最新推荐文章于 2025-10-17 11:18:32 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了uniapp中使用uni-simple-router进行路由守卫的场景，详细讲解了通过params和query两种方法获取页面参数的差异。params传递的参数在url中不显示，而query传递的参数会显示在地址栏。在目标页面，应分别通过this.$route.params和this.$route.query来获取相应参数。

uniapp中的路由守卫（uni-simple-router）

获取参数的两种常用方法：params和query

1、由于动态路由也是传递params的，所以 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。及通过配置路由的name属性访问

this.$router.push({name:"menuLink",params:{alert:"页面跳转成功"}})

2、在目标页面通过 this.$route.params 获取参数

<p>提示：{{this.$route.params.alert}}</p>

3、在目标页通过 this.$route.query 获取参数

//传值
this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})

//用query获取值
<p>提示：{{this.$route.query.alert}}</p>

注：两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏。需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Luckyflowers

关注关注

3
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uni-app - 子组件中实现 onShow() 生命周期，监听页面 onShow() 实时刷新子组件内的数据（子组件中模拟页面 onShow 钩子函数，当页面显示时自动执行函数）全端兼容无 BUG

🏆 前端领域优质创作者

12-12

9180

uni-app子组件怎么onShow，uniapp子组件中没有onshow怎么办，uniapp子组件怎么当页面显示时就执行，uniapp子组件中需要实时更新数据没有onshow这样的函数怎么办，uniapp子组件实时刷新数据，uniapp子组件监听父组件的onshow生命周期，uniapp子组件mounted刷新，uniapp子组件onshow不能使用，用mounted数值不更新怎么解决，uniapp子组件mounted第二次不执行怎么办，解决uniapp子组件mounted()第二次不执

解决UniApp子组件使用`onShow`、`onPullDownRefresh`、`onReachBottom`导致接口重复触发的优化方案

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

12-09

569

条件渲染的子组件中时，会有一个潜在的问题：由于闭包的存在，当子组件的状态来回切换时，这些函数可能会重复触发，导致接口重复请求、内存泄漏，甚至可能引发假死现象。每当组件卸载时，回调函数会被清空，从而避免不必要的资源浪费和接口重复请求。如果你也在使用UniApp，遇到了类似的问题，不妨参考这种方式来优化你的代码，确保应用的性能和稳定性。生命周期中重置回调函数逻辑，确保在子组件销毁时能正确卸载回调，避免因闭包导致的问题。，并在组件卸载时移除回调函数，避免内存泄漏和重复触发的问题。在开发UniApp应用时，

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

『uniapp』自定义组件 onLoad/onShow 函数不执行问题

ReturnTmp的博客

11-08

5219

在uniapp中，只有应用生命周期和页面生命周期，子组件是没有应用周期的。所以onLoad、onShow都不存在。onLoad是页面函数，不是组件函数。子组件中的onLoad和onShow函数不执行。

记录一下uniapp渲染微信小程序时uni.navigateBack未触发上个页面的onShow

最新发布

adhphon的博客

10-17

136

我只在第一次构建到微信开发者工具中触发了onShow 后来怎么也不触发。但是将uni改成wx就能每次触发了。

uniapp 自定义组件内部onload、onshow函数不运行问题

m0_58889179的博客

04-15

8373

解决方法：在methods中定义一个盛放onload和onshow中代码的函数（函数名：onLoadMethod）。在父组件显示该组件时通过ref调用子组件onLoadMethod方法。原因：在uniapp中，只有应用生命周期（项目生命周期）和页面生命周期，而onLoad和onShow属于页面的生命周期函数，所以组件中不会调用。问题：将写的页面代码，以组件形式展示时，组件中onLoad和onShow代码失效。

uni-app 子组件中onLoad、onShow里的方法不执行

mossbaoo的博客

04-15

1万+

原因：在uniapp中，只有应用生命周期和页面生命周期，子组件是没有应用周期的。所以onLoad、onShow都不存在。方法：如果想在渲染子组件时运行一些方法，可以用vue自身的生命周期mounted

uniapp开发页面onShow()里面赋值不生效

m0_59722227的博客

11-23

3235

最近在开发一个小程序+h5项目的时候遇到了一个问题,就是onshow()钩子函数中赋值的时候在小程序环境生效,但在h5的时候没生效,之前一直觉得可能是页面缓存问题,但查看文档和百度之后是onShow()这个函数本身就有问题.上辈子杀人放火,这辈子写前端适配...

uniapp 组件onShow和onLoad都不执行，应该用什么能立刻执行 import menuTab from './components/tabMenu/InitiateApproval.vue'

11-28

uniApp组件的`onShow`和`onLoad`生命周期钩子函数通常用于初始化页面数据、获取网络资源等场景，在首次加载或显示页面时会被调用。如果这两个钩子都没有执行，可能是以下几个原因： 1. 检查代码中是否正确设置了...

uniapp生命周期

Kun_912的博客

08-18

743

一、应用声明周期函数名说明 onLaunch 当uni-app初始化完成时触发（全局只触发一次） onShow 当uni-app启动，或从后台进入前台显示 onHide 当uni-app从前台进入后台 onError 当uni-app报错时触发 onUniNViewMessage 对nvue页面发送的数据进行监听，可参考nvue 向 vue 通讯 onUnhandledRejection 对未处理的 Promise ...

uniapp的onLoad,onShow,onUnload

04-25

好的，我现在需要回答用户关于uniapp中onLoad、onShow、onUnload这三个生命周期函数的用法和区别的问题。首先，我得回忆一下相关的知识，并结合提供的引用内容来组织答案。用户的问题很明确，想知道这三个函数的...

uniapp 返回上一页onshow不执行

03-01

### UniApp 页面返回 `onShow` 方法不执行的原因分析在 UniApp 中，页面生命周期函数 `onShow` 应该在每次进入页面时触发。然而，在某些情况下，特别是当通过特定方式返回页面时，可能会遇到 `onShow` 不被执行的...

uni-app中onLoad、onShow等函数无效

热门推荐

zlsjune123的博客

04-07

1万+

#初学uni-app，遇到onLoad()等函数无效开发uni-app时，在组件中的页面使用onLoad()、onShow()等函数时，无法正确初始化。查找官网文档，发现这些函数只能用于page中的vue页面，在组件中是无法使用的。无奈之下，只能使用mounted函数进行组件的初始化。对于官网文档的研究还不够仔细。下不为例。（mounted函数存在延迟，即当前组件加载后，如果想要实时更新页...

uni-app子组件里的onLoad、onShow里的方法等不执行？

陈小陈的博客

02-04

1万+

子组件里的onLoad、onShow里的方法等不执行? 最近在做关于疫情小程序时发现一个问题，采用uni-app，在父组件调用子组件时，发现子组件里的onLoad、onShow里的方法不执行？请教了师父后，记下了。 uni-app里，只有页面有生命周期，子组件是没有生命周期的，如果想用，那么用vue的生命周期。毕竟uni-app是把vue又封装了一次。 ...

uni-app tabbar切换时，下个界面onShow方法不执行

不以物喜，不以己悲

10-28

6129

uni-app tabbar切换时，上个页面onShow未执行完，下个界面的onShow不执行问题最近在开发时发现，因为业务的问题，pageA的onShow里有大量的网络请求代码，执行完耗时大概2s。在底部栏的tabbar切换时，从page A -> pageB，如果切换的快，pageA的onShow方法未执行完，则pageB的onShow也不会执行，猜测是uni-app对onShow的管理是一个线程。思路 1 pageA里的onshow方法中，业务逻辑全部替换成异步

uniapp 小程序onShow方法啊执行，但onHit方法不执行问题

jingogfhvk001的博客

07-17

6005

实测小程序onHide方法不执行，可以用onUnload方法替代 onUnload: function() { console.log("-----onUnload------>"); },

uniapp 子组件中onLoad、onShow里的方法不执行

weixin_43453621的博客

10-09

1190

如果想在渲染子组件时运行一些方法，可以用vue自身的。

uniapp之 onShow、onPullDownRefresh 等不生效使用 mounted 设置定时器

HQ\(^o^)/的博客

01-06

2953

因项目的需求，我需要在某个页面设置定时器，我这个定时器之所以使用 vue生命周期中的mounted以及是因为此页面是个子组件暂不支持 小程序中的 onShow、 onUnload 以及 onHide 页面生命周期因此代码如下别忘了在 data 里面要定义 timer ： null} else {}, 0)console.log('刷新', +new Date());},

uniapp onshow里面两个方法先后执行

06-20

<think>我们正在讨论UniApp中的onShow生命周期函数。根据用户的问题，他想了解在onShow生命周期中两个方法的执行顺序。但请注意，onShow本身是一个生命周期钩子，通常我们讨论的是不同生命周期钩子之间的顺序，而不是在同一个钩子内多个方法的顺序（因为同一个钩子内的多个方法按代码顺序执行）。不过，用户可能指的是在onShow生命周期中，它与其他生命周期（如onLoad,onReady等）的执行顺序。根据提供的引用，我们可以整理出UniApp页面生命周期函数的执行顺序：1.beforeCreate2.onLoad3.onShow4.created5.beforeMount6.onReady7.mounted当页面刷新数据时，还会触发更新相关的生命周期：-beforeUpdate-updated另外，引用[2]特别说明了onShow：它在页面展示时触发，当页面从后台切换到前台时也会触发。因此，onShow可能会多次执行。在同一个生命周期钩子内，如果我们定义了多个函数，那么它们的执行顺序取决于它们在代码中出现的顺序。但是，通常情况下，一个生命周期钩子（如onShow）我们只会定义一个函数，然后在这个函数内按顺序编写代码。如果用户指的是在onShow中调用了两个自定义方法，那么这两个方法的执行顺序就是它们在onShow函数中调用的顺序。例如：```javascriptonShow(){this.methodA();this.methodB();}```那么methodA先执行，methodB后执行。但是，如果用户问的是onShow与其他生命周期函数的执行顺序，那么根据引用[1]和[3]，顺序是：onLoad->onShow->...因此，我们需要明确用户的问题。由于用户的问题描述是“在UniApp的onShow生命周期中，两个方法的执行顺序问题”，这里可以理解为同一个onShow钩子中两个自定义方法的执行顺序。所以，回答应该是：在同一个onShow生命周期函数中，方法的执行顺序按照代码的书写顺序执行。同时，我们也可以补充整个生命周期的顺序，以便用户全面了解。另外，根据系统指令，我们需要生成相关问题。根据以上分析，回答如下：</think>在 UniApp 页面生命周期中，`onShow` 的执行顺序和特性如下： ### 执行顺序解析 1. **整体生命周期顺序**（首次加载）： ```text beforeCreate → onLoad → onShow → created → beforeMount → onReady → mounted ``` 当页面首次加载时，`onShow` 在 `onLoad` 之后、`created` 之前执行[^1][^3]。 2. **`onShow` 的重复触发特性**： - 当页面从**后台切换回前台**（如从其他页面返回、APP从后台唤醒）时，`onShow` 会再次触发[^2] - 此时**不会重新执行** `onLoad/onReady` 等初始化钩子 - 典型场景：用户从子页面返回列表页时，可在 `onShow` 中刷新数据 3. **`onShow` 内部方法顺序**： ```javascript onShow() { this.methodA(); // 先执行 this.methodB(); // 后执行 } ``` 同一个 `onShow` 钩子内的**方法按代码顺序同步执行**，无异步延迟。 ### 关键区别 | 生命周期 | 触发时机 | 执行次数 | |----------|--------------------------|----------| | `onLoad` | 页面**首次创建**时 | 仅1次 | | `onShow` | 页面**显示时**（含切回） | 多次 | ### 典型使用场景 ```javascript onShow() { // 1. 页面切回时刷新数据（如购物车更新） this.loadCartData() // 2. 更新实时状态（如在线状态检测） this.checkConnectionStatus() } ``` > ⚠️ 注意：在 `onShow` 中访问组件实例 (`this`) 是安全的，因为此时 `beforeCreate`/`onLoad` 已完成初始化[^3]。