HarmonyOS router路由跳转问题

A--->B--->C --->A，并清空路由栈中的B和C。

HarmonyOS

put_get

2024-09-27 11:46:30

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

在 HarmonyOS 中，想要实现从页面 A 跳转到 B，再跳转到 C，然后再返回到 A，并清空路由栈中的 B 和 C，可以使用 router.replace 方法。这种方式可以确保在跳转到目标页面时，将当前页面从路由栈中移除。

以下是一个完整的示例代码，实现从页面 A 跳转到 B，再跳转到 C，然后从 C 返回 A 并清空中间的路由记录。

### 示例代码

#### 首页 (A)

// PageA.hml
<template>
  <div class="container">
    <button @click="navigateToB">Go to Page B</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToB() {
      router.push({
        uri: 'pages/PageB/PageB'
      });
    }
  }
}
</script>

<style>
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

button {
  font-size: 16px;
  color: #ffffff;
  background-color: #007dff;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

#### 第二页 (B)

// PageB.hml
<template>
  <div class="container">
    <button @click="navigateToC">Go to Page C</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToC() {
      router.push({
        uri: 'pages/PageC/PageC'
      });
    }
  }
}
</script>

<style>
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

button {
  font-size: 16px;
  color: #ffffff;
  background-color: #007dff;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

#### 第三页 (C)

// PageC.hml
<template>
  <div class="container">
    <button @click="navigateToA">Go back to Page A</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToA() {
      // 使用 replace 方法返回到 PageA 并清除 B 和 C
      router.replace({
        uri: 'pages/PageA/PageA',
        clear: 1 // 清除所有之前的页面
      });
    }
  }
}
</script>

<style>
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

button {
  font-size: 16px;
  color: #ffffff;
  background-color: #007dff;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

### 解释