HarmonyOS 鸿蒙Next Navigation跳转方式管理容器盏代替router跳转
HarmonyOS 鸿蒙Next Navigation跳转方式管理容器盏代替router跳转
新的跳转方式需改步骤
1.原生页面，NavDestination包裹布局内容，title尽量于类名一致方便定位
NavDestination() {
//原有布局内容
}
.title('SearchPage')
.hideTitleBar(true)
2.MainPage 里面注入
[@Builder](/user/Builder)
NavigationBuild(name: string) {
if (name === 'webViewPage') {
BOBWebviewPage()
} else if (name === 'LoginPage') {
LoginPage()
} else if (name === 'SearchPage') {
SearchPage()
} else if (name === 'SearchResultPage') {
SearchResultPage()
}
}
3.跳转方式
let pageInfo = new BOBWebViewPageModel();
let param :ESObject= {
searchTitle: this.text
};
pageInfo.param=param
BOBNavigationManager.getInstance().getNavStack().pushPath({name:"SearchResultPage",param:pageInfo})
4.接参方式
if (this.webviewPageModel === undefined) {
this.webviewPageModel = this.pageInfos.getParamByIndex(this.pageInfos.size() - 1) as BOBWebViewPageModel
}
if (this.webviewPageModel) {
this.title=this.webviewPageModel.param.searchTitle
} else {
this.title = ""
}
5.导航栏返回事件
NavigationBarBuilder({
navTitle: '搜索',
backArrowCallBack:()=>{
//1.向上返回，2.无法返回 关闭当前容器
//删除当前容器id对应的盏信息
this.pageInfos.pop()
@
Consume(‘pageInfos’) pageInfos: NavPathStack //容器盏变量代码
},
})
8 回复
主程序入口要加，我们项目代码中加到了mainpage，
build() {
Navigation(this.pageInfos){
Stack() {
Column() {
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
Stack() {
HomePageView()
}
}
.tabBar(this.TabBuilder('首页', 0, $r("app.media.icon_mainPage_home_selected"), $r("app.media.icon_mainPage_home_normal")))
TabContent() {
FinancialPageView()
}
.tabBar(this.TabBuilder('金融', 1, $r("app.media.icon_mainPage_financial_selected"), $r("app.media.icon_mainPage_financial_normal")))
TabContent() {
// BOBWebview()
// BOBWebviewPage2()
OfficePageView()
}
.tabBar(this.TabBuilder('办公', 2, $r("app.media.icon_mainPage_office_selected"), $r("app.media.icon_mainPage_office_normal")))
TabContent() {
SettingPageView()
}
.tabBar(this.TabBuilder('我的', 3, $r("app.media.icon_mainPage_setting_selected"), $r("app.media.icon_mainPage_setting_normal")))
}
.barWidth("100%")
.barHeight(60)
.width('100%')
.height('100%')
.backgroundColor(Color.White)
.scrollable(false)
.animationDuration(0)
}.width("100%")
.height("100%")
.backgroundColor(Color.White)
if (this.currentIndex === 0) {
if (PersistentUtil.get('Home_Guide') as boolean) {
BfginnerGuideComponent({
FirstUserGuideIsShow: Visibility.None,
AllUserGuideIsShow: Visibility.None
})
} else {
BfginnerGuideComponent({
FirstUserGuideIsShow: Visibility.Visible,
AllUserGuideIsShow: Visibility.Visible
})
}
}
if (this.currentIndex === 1) {
if (PersistentUtil.get('Financial_Guide_Show') as boolean) {
BfginnerGuideComponent({
FifthUserGuideIsShow: Visibility.None,
AllUserGuideIsShow: Visibility.None
})
} else {
BfginnerGuideComponent({
FifthUserGuideIsShow: Visibility.Visible,
AllUserGuideIsShow: Visibility.Visible
})
}
}
if (this.currentIndex === 2) {
if (PersistentUtil.get('Office_Guide_Show') as boolean) {
BfginnerGuideComponent({
SixthUserGuideIsShow: Visibility.None,
AllUserGuideIsShow: Visibility.None
})
} else {
BfginnerGuideComponent({
SixthUserGuideIsShow: Visibility.Visible,
AllUserGuideIsShow: Visibility.Visible
})
}
}
// 判断是否需要显示快捷版
if ((this.switchVersionBean.showOneTypeVersion === '0' && this.showOneTypeVersion === '1')) {
TabQuicklyVersionBuilder({switchVersionBean: this.switchVersionBean})
}
}
}
.navDestination(this.NavigationBuild)
.mode(NavigationMode.Stack)
.hideTitleBar(true)
这个方式就类似于安卓中的Activity+Fragment形式，出现的本质是为了解决碎片化问题，比如一个登录页多个页面切换的问题。不同模块不建议用Navigation。他有他的优势，但是无法替代Router。
在HarmonyOS鸿蒙Next中，Navigation跳转方式确实逐渐成为了管理容器的主流，用以代替传统的Router跳转方式。这一变化主要体现在API Version 10及以后的版本中，推荐使用NavPathStack配合NavDestination来实现页面路由。
Navigation作为页面的根容器，通过NavPathStack管理页面栈，支持pushPath和pushPathByName等方法进行页面跳转，同时提供了pop、move、clear等多种操作来灵活控制页面栈的状态。相比之下，Router则主要通过URL地址实现页面路由，支持pushUrl和replaceUrl两种跳转模式，并可以传递参数。
Navigation跳转方式的优势在于其提供了更丰富的导航控制，如动态加载、跨包引用等，适用于需要统一页面跳转管理、复杂导航控制的场景。然而，这也可能占用更多的系统资源，且学习曲线较陡，需要开发者理解多种导航控制和路由转场的概念。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。
