跳转目标页面的onShow生命周期没有触发

奔跑的狮子

现象描述

通过router.push接口跳转到快应用的B页面，当B页面只是引用一个自定义组件XX的时候，B页面的onShow生命周期无法触发。如下图所示：

问题代码如下。

B页面代码：

<import name="listone" src="./aa.ux"></import>
<template>
<listone></listone>
</template>
<script>
  import prompt from '@system.prompt'
  export default {
    private: {
    },
    onInit: function () {
    },
    onShow() {
      console.log('The onShow event triggers');
      prompt.showToast({
        message: 'The onShow event triggers'
      })
    }, //无法触发
  }
</script>
<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title {
    font-size: 40px;
    text-align: center;
  }
</style>

自定义组件aa.ux代码：

<template>
<div class="container">
<text>Nice day.</text>
<text>Nice day.</text>
<text>Nice day.</text>
<text>Nice day.</text>
</div>
</template>
<style>
 .container {
    flex-direction: column;
    justify-content: center;
align-items: center;
background-color: #D8D8D8;
  }
</style>
<script>
  module.exports = {
    data: {
    },
    onInit() {
    },
  }
</script>

行进的蜗牛

问题分析

快应用引擎框架对于自定义组件作为B页面的根节点时，B页面的onShow生命周期是无法触发的，但是子组件自身的onShow可以触发。

解决方法

在B页面的子组件外面加个div组件作为根节点，而不是把自定义组件作为根节点，这样B页面的onShow生命周期就可以触发了。

B页面修改后的代码：

<import name="listone" src="./aa.ux"></import>
<template>
<!-- template里只能有一个根节点 -->
<div><!-- 新增div作为根节点 -->
<listone></listone>
</div>
</template>
<script>
  import prompt from '@system.prompt'
  export default {
    private: {
    },
    onInit: function () {
    },
    onShow() {
      console.log('The onShow event triggers');
      prompt.showToast({
        message: 'The onShow event triggers'
      })
    },
  }
</script>
<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title {
    font-size: 40px;
    text-align: center;
  }
</style>

修改后运行效果如下：