uniapp中多次跳转出现当前页面正在处于跳转状态,请稍后再进行跳转?

uniapp项目,我用的uni-simple-router来做路由,现在有一个问题,我跳到一个页面后在这个页面马上中再跳转的话就会出现:当前页面正在处于跳转状态,请稍后再进行跳转....的提示:
image.png
我现在是用setTimeout来解决这个问题,有没有更好的办法?

setTimeout(()=>{
                            this.$Router.replace({
                                "name": "create"
                            })
                        },1000)

还有我在页面里写了两个周期函数,但是created每次都执行,但onshow一次也不执行。

created() {
            console.log("created...")
            this.getuserinfo()
            
        },
        onShow() {
            console.log("onShow...")
            this.getuserinfo()
        },
阅读 4.4k
1 个回答

在uniapp中,页面跳转的时候确实会出现当前页面正在跳转状态的提示,这是为了防止连续跳转导致页面堆积。如果你想要在当前页面跳转后立即再次跳转,可以考虑使用uniapp提供的navigateTo和redirectTo方法,它们可以实现页面跳转,并且不会出现跳转状态提示。

示例代码如下:

uni.navigateTo({
    url: '/pages/create'
})
uni.redirectTo({
    url: '/pages/create'
})

另外,关于created和onShow生命周期函数的执行情况,created只在页面初始化时执行一次,而onShow在页面显示时执行。如果你想在每次页面显示时都执行某个逻辑,可以考虑将逻辑代码放在onShow函数中。如果onShow函数没有执行,可能是因为页面还没有被显示过,或者在跳转页面的时候使用了replace方法,replace方法并不会触发onShow函数的执行。如果需要在replace后执行某些逻辑,可以考虑使用uniapp提供的onUnload生命周期函数。

onUnload() {
    console.log("onUnload...")
    this.getuserinfo()
},

在uni-app中,页面跳转是异步操作,如果在当前页面跳转完成之前再次触发跳转,就会出现上述提示。

你也可以尝试使用beforeRouteEnter守卫来解决这个问题,该守卫会在路由即将进入的时候被调用,可以在该守卫中判断当前页面是否正在跳转状态,如果是,则延迟跳转。

具体的实现步骤如下:

  1. 在路由配置文件中(如router.js)中定义beforeEnter函数,用于判断当前页面是否正在跳转状态:
import Vue from 'vue'
import Router from 'uni-simple-router'

Vue.use(Router)

const router = new Router({
  routes: [
    // 路由配置
  ]
})

router.beforeEnter((to, from, next) => {
  if (router.currentRoute.meta.isNavigating) {
    setTimeout(() => {
      next()
    }, 1000)
  } else {
    next()
  }
})

export default router
  1. 在需要进行跳转的地方,设置meta.isNavigatingtrue,表示当前页面正在跳转:
this.$Router.replace({
  name: 'create',
  meta: {
    isNavigating: true
  }
})
  1. 在跳转完成后,将meta.isNavigating设置为false,表示跳转完成:
this.$Router.replace({
  name: 'create',
  meta: {
    isNavigating: false
  }
})

通过以上步骤,可以避免在页面跳转过程中再次触发跳转而导致的问题。

至于createdonShow的执行情况,可以根据你的业务逻辑进行判断。如果需要在每次页面显示时都执行一些逻辑,可以考虑使用onShow钩子函数,如果只需要在页面创建时执行一次,可以使用created钩子函数。请确保你的页面配置中已经正确引入了这两个钩子函数。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏