原生鸿蒙路由总结

原创

已于 2024-11-09 14:31:12 修改 · 905 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #网络

于 2024-11-09 14:30:33 首次发布

Navigation路由导航

使用Navigation代替所有的路由跳转

理念是：一整个应用都只有一个page，剩余其它的部分都是组件【华为推荐使用Navigation路由导航】

第一种路由方式

根组件最外层必须被Navigation包裹

要被跳转的组件必须被NavDestination包裹

跳转对象是用NavPathStack对象

NavPathStack必须绑定给Navigation

下层组件使用各种方式获取上层的NavPathStack进行跳转

跳转维护由.navDestination实现

Navigation绑定NavPathStack，最好用Provide提供给子组件使用

路由管理-给Navigation绑定.navDestination(builder)- builder不能写小括号模式

 import { Friend } from './Friend'
 import { Live } from './Live'
 import { Shake } from './Shake'
 
 @Entry
 @Component
 struct NavigationCase {
   @Provide
   stackPath: NavPathStack = new NavPathStack()
 
 
   @Builder
   getRouterBuilder (name: string) {
    // name是要跳转的标识
     if(name === 'friend') {
       Friend()
     }
     else if(name === "live") {
      Live()
     }
     else if(name === "shake") {
      Shake()
     }
   }
 
   build() {
     // 1. 使用Navigation包裹整个根组件
     Navigation(this.stackPath) {
        List() {
          ListItem(){
            Text("朋友圈")
              .fontSize(20)
              .width("100%")
          }
          .height(50)
          .width("100%")
          .padding({
            left: 20
          })
          .onClick(() => {
            this.stackPath.pushPath({
              name: 'friend'
            })
          })
 
          ListItem(){
            Text("直播")
              .fontSize(20)
              .width("100%")
          }
          .height(50)
          .width("100%")
          .padding({
            left: 20
          })
          .onClick(() => {
            this.stackPath.pushPath({
              name: 'live'
            })
          })
          ListItem(){
            Text("摇一摇")
              .fontSize(20)