Uniapp页面跳转与代码执行

在Uniapp中,使用uni.navigateTo()uni.redirectTo()等API跳转页面后,跳转方法后面的代码仍然会继续执行

这是因为Uniapp的页面跳转是异步操作

  • 当调用uni.navigateTo()uni.redirectTo()等方法时,Uniapp会立即发起页面跳转,同时方法本身会立即返回,不会等待新页面加载完成。
  • 因此,跳转方法后面的代码会继续执行,而不会被阻塞。

以下示例代码演示了这一行为:

console.log('开始跳转页面');
uni.navigateTo({
  url: '/pages/otherPage'
});
console.log('跳转完成');

// otherPage.vue
<template>
  <view>
    <text>其他页面</text>
  </view>
</template>

运行这段代码,你会发现控制台会依次打印'开始跳转页面'和'跳转完成',然后才会跳转到otherPage页面。

页面跳转后的逻辑处理

如果需要在页面跳转后执行一些操作,可以通过以下方法实现:

  1. 在目标页面的生命周期钩子中处理

    • onLoad:页面加载时触发
    • onShow:页面显示时触发

    otherPage.vueonLoadonShow生命周期钩子中添加相关逻辑,即可在页面跳转后执行特定操作。

  2. 使用回调函数

    某些跳转API,例如uni.navigateTo,支持传入successfailcomplete等回调函数,可以在页面跳转成功、失败或完成后执行相应的逻辑。

    uni.navigateTo({
      url: '/pages/otherPage',
      success: () => {
        console.log('页面跳转成功');
      }
    });
    

通过以上方法,可以方便地在Uniapp中处理页面跳转前后的逻辑。

Uniapp页面跳转后代码还会执行吗?

原文地址: https://www.cveoy.top/t/topic/b9JL 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录