The page life cycle onShow is not triggered

Symptom:

Jump to page B of the fast app through the router.push interface. When page B only references a custom component XX, the onShow life cycle of page B cannot be triggered. As shown below:

code show as below:

B page code:

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

Custom component aa.ux:

<template>
  <div class="container">
    <text>天气不错啊</text>
    <text>天气不错啊</text>
    <text>天气不错啊</text>
    <text>天气不错啊</text>
  </div>
</template>
<style>
 .container {
    flex-direction: column;
    justify-content: center;
align-items: center;
background-color: #00fa9a;
  }
</style>
<script>
  module.exports = {
    data: {
    },
    onInit() {
    },
  }
</script>

problem analysis:
The fast application engine framework determines that when a custom component is the root node of page B, the onShow life cycle of page B cannot be triggered, but the onShow of the child component itself can be triggered.
solution:
Add a div component outside the sub-components of page B as the root node, instead of using a custom component as the root node, so that the onShow life cycle of page B can be triggered.

The modified code of page B is as follows (see the red part):

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

The modified code is shown in the figure below:

For more details, please see:

Fast application life cycle:

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-script#h2-1575381018573

Original link: https://developer.huawei.com/consumer/cn/forum/topic/0202460391550390950?fid=0101271690375130218
Original Author: Mayism