HarmonyOS鸿蒙Next中引导页使用this.pathStack.replacePathByName（）跳转出现闪退问题

【背景知识】 Navigation组件导航：用于实现Navigation页面（NavDestination）间的跳转，支持在不同Navigation页面间传递参数，提供灵活的跳转栈操作，从而更便捷地实现对不同页面的访问和复用。 Navigation：Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

【解决方案】 Navigation页面为根页面，根页面无法被this.pageInfos.replacePathByName替换，调用该方法之后，页面依旧会保留在栈顶。

通过replacePathByName实现替换NavDestination可以参考下以下示例：

Index页面：

@Entry
@Component
struct Index {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();

  build() {
    Stack() {
      Navigation(this.pageInfos) {
        Column() {
          Button('To PageA', { stateEffect: true, type: ButtonType.Capsule })
            .width('80%')
            .height(40)
            .margin(20)
            .onClick(() => {
              this.pageInfos.pushPath({ name: 'pageA' });
            });
        };
      }.title('NavIndex');
    };
  }
}

PageA页面：

@Builder
export function PageABuilder() {
  PageA();
}

@Component
export struct PageA {
  @Consume('pageInfos') pageInfo: NavPathStack;
  // 倒计时变量 - 使用@State装饰器
  @State countdown: number = 10
  // 计时器ID
  timer: number | null = null

  // 生命周期
  aboutToAppear(): void {
    // 启动倒计时
    this.startCountdown()
  }

  // 组件销毁时清理计时器
  aboutToDisappear(): void {
    if (this.timer !== null) {
      clearInterval(this.timer)
      this.timer = null
    }
  }

  // 启动倒计时方法
  startCountdown(): void {
    this.timer = setInterval(() => {
      if (this.countdown > 0) {
        // 更新倒计时值，触发UI更新
        this.countdown--
      } else {
        // 倒计时结束，执行跳转
        this.pageInfo.replacePathByName('PageB', null, false)
        // 清除计时器
        if (this.timer !== null) {
          clearInterval(this.timer)
          this.timer = null
        }
      }
    }, 1000)
  }

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.TopEnd }) {
        Image($r('app.media.pic_nonevip_preview'))
          .width('100%')
          .height('100%')
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
        Button(`跳过 ｜ 倒计时${this.countdown}`)
          .backgroundColor(Color.Grey)
          .margin(20)
          .onClick(() => {
            // 停止倒计时
            if (this.timer !== null) {
              clearInterval(this.timer)
              this.timer = null
            }
            // 执行跳转
            this.pageInfo.replacePathByName('PageB', null, false)
          })
      }
    }
    .width('100%')
    .title('pageA')
    .onBackPressed(() => {
      this.pageInfo.pop();
      return true;
    })
    .onReady((context: NavDestinationContext) => {
      this.pageInfo = context.pathStack;
    });
  }
}

PageB页面：

@Builder
export function PageBBuilder() {
  PageB();
}

@Component
export struct PageB {
  @Consume('pageInfos') pageInfo: NavPathStack;

  build() {
    NavDestination() {
      Column() {
        Text('PageB')
          .width('80%')
          .height(40)
          .margin(20)
      }.width('100%').height(300);
    }
    .width('100%')
    .title('pageB')
    .onBackPressed(() => {
      this.pageInfo.pop();
      return true;
    }).onReady((context: NavDestinationContext) => {
      this.pageInfo = context.pathStack;
    });
  }
}

router_map.json配置：

{
  "routerMap": [
    {
      "name": "pageA",
      "pageSourceFile": "src/main/ets/view/PageA.ets",
      "buildFunction": "PageABuilder",
      "data": {
        "description": "this is pageA"
      }
    },
    {
      "name": "PageB",
      "pageSourceFile": "src/main/ets/view/PageB.ets",
      "buildFunction": "PageBBuilder",
      "data": {
        "description": "this is pageB"
      }
    }
  ]
}

需要实现页面替换根页面的效果可以在根页面当中定义一个状态变量，通过该状态变量控制Navigation根页面显示内容，示例如下：

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack();
  @State isShowIndex: boolean = false;

  build() {
    Navigation(this.pathStack) {
      if (this.isShowIndex) {
        Column() {
          Text('首页面')
            .fontSize(30)
            .fontWeight(FontWeight.Medium)
        }
        .width('100%')
        .height('100%')
      } else {
        SplashPage({
          onChangePage: () => {
            this.isShowIndex = true;
          }
        })
      }
    }
  }
}

@Component
export struct SplashPage {
  onChangePage: VoidCallback = () => undefined;
  // 倒计时变量 - 使用@State装饰器
  @State countdown: number = 10;
  // 计时器ID
  timer: number | null = null;

  aboutToAppear(): void {
    this.startCountdown();
  }

  // 组件销毁时清理计时器
  aboutToDisappear(): void {
    if (this.timer !== null) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }

  // 启动倒计时方法
  startCountdown(): void {
    this.timer = setInterval(() => {
      if (this.countdown > 0) {
        // 更新倒计时值，触发UI更新
        this.countdown--;
      } else {
        // 倒计时结束，执行跳转
        this.onChangePage();
        // 清除计时器
        if (this.timer !== null) {
          clearInterval(this.timer);
          this.timer = null;
        }
      }
    }, 1000)
  }

  build() {
    Column({ space: 15 }) {
      Stack({ alignContent: Alignment.TopEnd }) {
        Image($r('app.media.pic_nonevip_preview'))
          .width('100%')
          .height('100%')
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
        Button(`跳过 ｜ 倒计时${this.countdown}`)
          .backgroundColor(Color.Grey)
          .margin(20)
          .onClick(() => {
            // 停止倒计时
            if (this.timer !== null) {
              clearInterval(this.timer);
              this.timer = null;
            }
            // 执行跳转
            this.onChangePage();
          })
      }
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}