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

Question

uniapp项目，我用的uni-simple-router来做路由，现在有一个问题，我跳到一个页面后在这个页面马上中再跳转的话就会出现：当前页面正在处于跳转状态，请稍后再进行跳转....的提示：

我现在是用setTimeout来解决这个问题，有没有更好的办法？

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

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

created() {
            console.log("created...")
            this.getuserinfo()
            
        },
        onShow() {
            console.log("onShow...")
            this.getuserinfo()
        },

Answer 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

2. 在需要进行跳转的地方，设置meta.isNavigating为true，表示当前页面正在跳转：

this.$Router.replace({
  name: 'create',
  meta: {
    isNavigating: true
  }
})

3. 在跳转完成后，将meta.isNavigating设置为false，表示跳转完成：

this.$Router.replace({
  name: 'create',
  meta: {
    isNavigating: false
  }
})

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

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