HarmonyOS 鸿蒙Next中Navigation跳转销毁登录界面

HarmonyOS 鸿蒙Next中Navigation跳转销毁登录界面 请问怎么做到像QQ跟微信那样子 点击登录之后就销毁之前的那个登录界面 我是说用navigation怎么实现，router我知道怎么实现，求赐教

15 回复

把登录页也实现成NavDestination，在aboutToAppear里先Push到NavPathStack里
Navigation里不放东西，同时设置上hideNavbar，这样进来就会跳到路由栈里顶层的NavDestination，后面再用replace替换就行
 

更多关于HarmonyOS 鸿蒙Next中Navigation跳转销毁登录界面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


注意这样会失去Navigation的大屏分栏功能，如果后续需要有父子页面在大屏左右显示，可能要再套一层Navigation，

是不是在第一个页面先用abouttoappear先把navigation实现出来然后，登陆页面实现为navdestination，然后登陆之后的界面直接replace是这样子的吗，我看一下思路对不对，

麻烦你看一下我下面的回答麻烦你了，

// src/main/ets/pages/Index.ets
@Entry
@Component
struct Index {
  pageStack : NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pageStack)
      .onAppear(() => {
        this.pageStack.pushPathByName("PageOne", null, false);
      })
      .hideNavBar(true)
  }
}



// src/main/ets/pages/PageOne.ets
@Builder
export function PageOneBuilder() {
  PageOne();
}

@Component
struct PageOne {
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Column() {
        Text('PageOne')
          .fontSize(23)
          .fontWeight(FontWeight.Bolder)
        Button('登录')
          .onClick(() => {
            this.pathStack.replacePathByName('PageTwo', null);
          })
      }
      .width('100%')
      .height('100%')
    }
    .hideBackButton(true)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}



// src/main/ets/pages/PageTwo.ets
@Builder
export function PageTwoBuilder() {
  PageTwo();
}

@Component
struct PageTwo {
  pathStack: NavPathStack = new NavPathStack();
  @State path: string = '';

  build() {
    NavDestination() {
      Column() {
        Text('PageTwo')
          .fontSize(23)
          .fontWeight(FontWeight.Bolder)

        Button('获取')
          .onClick(() => {
            this.path = this.pathStack.getAllPathName().join('_');
          })

        Text(this.path)
      }
      .width('100%')
      .height('100%')
    }
    .hideBackButton(true)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}



// src/main/resources/base/profile/route_map.json
{
  "routerMap": [
    {
      "name": "PageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description" : "this is PageOne"
      }
    },
    {
      "name": "PageTwo",
      "pageSourceFile": "src/main/ets/pages/PageTwo.ets",
      "buildFunction": "PageTwoBuilder",
      "data": {
        "description" : "this is PageTwo"
      }
    }
  ]
}

代码我贴上来了，Index里用了Navigation的onAppear来推入第一个页面（Index的aboutToAppear里推入 也行） 这样从PageOne跳转到PageTwo后，返回就直接退出App了，不会再回到PageOne

好的谢谢大佬，我会查看的太麻烦你了，回复晚了sorry，

谢谢大佬帮我实现了这个问题谢你了，

你看一下我在哪里写一个navigation我不是很知道

还是不行我有看过你这个办法

你好，可以使用 replacePathByName

replacePathByName(name: string, param: Object, animated?: boolean): void

将当前路由栈栈顶退出，将name指定的页面入栈。

也就是，使用新的登录页代替当前页面作为新路由栈。

this.navPathStack.replacePathByName('login', {})

你好但是我这个有试过我在下面回答那里有写出来代码但是并不可以，

看了下面的代码，当前是在Navigation容器页面，这样调用replace是无效的。 要在这里面切换页面的话，你可以使用一个状态变量控制，根据if-else去切换。

@Entry
@Component
struct Index {
  @State isShowPageTwo: boolean = false

  build() {
    Navigation() {
      if (this.isShowPageTwo) {
        Column() {
          //page two
        }
      } else {
        Column() {
          //page one
        }
      }
    }
  }
}

谢谢大佬，如果要用replace这个有啥解决方案吗，我现在大概懂你的这个东西了，

在HarmonyOS Next中，使用Navigation进行页面跳转时，若需销毁登录界面，可通过调用router.clear()方法或设置Navigation的clear参数实现。例如，在登录成功后跳转至主页时，将登录页从页面栈中移除，避免用户返回。具体实现涉及页面路由管理，需在跳转时配置相应参数以清除历史页面。

在HarmonyOS Next中，使用Navigation组件实现登录后销毁登录页面，可以参考以下思路：

Navigation的页面栈管理机制与Router不同，它默认会将所有经过的页面压入栈中。要实现登录后“销毁”登录页的效果，核心是在登录成功后，将登录页从导航栈中移除。

一个典型的实现方案是使用 Navigation 的页面路由跳转方法，并配合 router.clear() 来重置路由栈，但这通常需要结合页面路由的 onPageShow 等生命周期进行精细控制。更直接且符合Navigation模式的做法是：

  1. 在登录成功的回调函数中，执行页面跳转。
  2. 使用 router.replaceUrl 或类似的导航方法，将当前登录页替换为目标主页。

关键点在于“替换”而非“压入”。 这样，导航栈中登录页的条目会被目标页替换，从用户视角和回退行为上看，登录页就被“销毁”了。

示例代码逻辑：

// 在登录页面的登录成功回调中
import router from '@ohos.router';

function onLoginSuccess() {
  // 使用replaceUrl跳转到主页，这会用主页替换导航栈中的当前页面（登录页）
  router.replaceUrl({
    url: 'pages/HomePage' // 主页的路径
  });
}

需要注意：

  • 确保你的页面路由配置正确。
  • 这种方式下，用户点击系统返回键将直接退出应用，而不会回到登录页，这符合QQ/微信等应用的行为。

如果希望完全基于Navigation组件自身的API而不依赖router模块，则需要通过自定义Navigation的页面栈管理逻辑来实现，例如在跳转前动态修改传递给Navigation的页面数组。但这通常更复杂，而上述结合router.replaceUrl的方法是更清晰和推荐的做法。

回到顶部