鸿蒙路由跳转Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。ro

Navigation

Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。
使用Navigation跳转的组件不需要再使用Entry来修饰，普通组件即可。
使用Navigation在不同设备中会得到不同的视觉体验
当需要转场动效时，考虑使用过这种方式

API9的用法

import { promptAction, router } from '@kit.ArkUI'

@Entry
@Component
struct NavCase {
  build() {
    Navigation() {
      NavRouter() {
        Row() {
          Button("去A页面")
        }
        .height(60)
        NavDestination() {
          Text("A页面内容")
        }
        .title("A页面")
      }
      NavRouter() {
        Row() {
          Button("去B页面")
        }
        .height(60)
        NavDestination() {
          Text("B页面内容")
        }
        .title("B页面")
      }
    }
    .title("测试")
    .titleMode(NavigationTitleMode.Mini)
  }
}

API11的用法

import { promptAction, PromptAction } from '@kit.ArkUI'

@Entry
@Component
struct NavigationCase2 {
  @Provide
  stackPath: NavPathStack = new NavPathStack() // 声明一个pathStack对象

  @Styles
  gridStyle () {
    .height(100)
    .borderRadius(10)
    .backgroundColor(Color.Red)
    .margin(10)

  }
  @Builder
  getPageContent (name: string) {

      if(name === "friend") {
        // 渲染朋友圈组件
        Friend()
      }
      else if(name === "my") {
        // 渲染朋友圈组件
        My()
      }
      else if(name === "connect") {
        // 渲染朋友圈组件
        Connect()
      }
      else if(name === "chat") {
        // 渲染朋友圈组件
        Chat()
      }

  }
  build() {
    // 绑定关系
    Navigation(this.stackPath) {
    //  四个导航 导航不同的页面
      // 朋友圈 我的 联系人 聊天
      GridRow ({ columns: 2 }) {
        GridCol() {
          Text("朋友圈")
            .fontColor(Color.White)
        }
        .gridStyle()
        .onClick(() => {
          // this.stackPath.pushPath({
          //   name: 'friend'
          // })
         this.stackPath.pushPathByName("friend", null)
        })
        GridCol() {
          Text("我的")
            .fontColor(Color.White)
        }  .gridStyle()
        .onClick(() => {
          this.stackPath.pushPathByName("my", null)
        })
        GridCol() {
          Text("联系人")
            .fontColor(Color.White)
        }  .gridStyle()
        .onClick(() => {
          this.stackPath.pushPathByName("connect", null)
        })
        GridCol() {
          Text("聊天")
            .fontColor(Color.White)
        }  .gridStyle()
        .onClick(() => {
          this.stackPath.pushPathByName("chat", null)
        })
      }
    }
    .title("微信主页")
    .titleMode(NavigationTitleMode.Mini)
    .navDestination(this.getPageContent)
  }
}

@Component
struct Friend {
  @Consume
  stackPath: NavPathStack
  build() {
    NavDestination() {
      Text("朋友圈组件")
      Button("到我的").onClick((event: ClickEvent) => {
         // this.stackPath.pushPathByName("my", null)
        this.stackPath.replacePathByName("my", null)
      })
    }
    .title("朋友圈")
  }
}
@Component
struct My {
  build() {
    NavDestination() {
      Text("我的")
    }
    .title("我的")
  }
}
@Component
struct Connect {
  build() {
    NavDestination() {
      Text("联系人")
    }
    .title("联系人")
  }
}
@Component
struct Chat {
  build() {
    NavDestination() {
      Text("聊天")
    }
    .title("聊天")
  }
}

router实现页面间跳转

pushUrl

router.pushUrl({
  // 注意这里pages前不要有/，跳转的页面需要entry修饰，并且在main_pages.json中注册
  url: 'pages/routerpage2',
  params: {
    data1: 'message',
    data2: {
      data3: [123, 456, 789]
    }
  } 
}, 
// mode：页面跳转模式
// Standard：多实例模式，默认模式
// Single： 单实例模式
router.RouterMode.Standard, (err) => {
  if (err) {
    console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('pushUrl success');
});

replaceUrl

用应用内的某个页面替换当前页面，并销毁被替换的页面。不支持设置页面转场动效，如需设置，推荐使用Navigation组件。

   router.replaceUrl({
    url: 'pages/detail',
    params: {
      data1: 'message'
    }
  }, router.RouterMode.Standard, (err) => {
    if (err) {
      console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('replaceUrl success');
  });

back, 返回上一页面或指定的页面

router.back({url:'pages/detail'});    
router.back();   
router.back({
  url: 'pages/detail',
  params: {
    addExcept: true
  } 
})

clear, 清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面
```
router.clear();    
```

getLength, 获取当前在页面栈内的页面数量

// 最大支持32个
let size = router.getLength();        
console.log('pages stack size = ' + size);

getState,获取当前页面的状态信息

let page = router.getState();
// 表示当前页面在页面栈中的索引, 从栈底到栈顶，index从1开始递增
console.log('current index = ' + page.index);
// 表示当前页面的名称，即对应文件名
console.log('current name = ' + page.name);
// 表示当前页面的路径
console.log('current path = ' + page.path);

showAlertBeforeBackPage, 开启页面返回询问对话框
- 样式不支持定制，当使用router.back()返回时触发，系统返回按键事件不会触发
```
router.showAlertBeforeBackPage({
  message: 'Message Info'
});
```
hideAlertBeforeBackPage，禁用页面返回询问对话框
- 使用场景：当需要同时拦截系统返回按键和router.back()事件时，在生命周期函数onBackPress中返回true，自己处理返回逻辑后利用router.back()返回，此时为了避免二次返回确认弹窗可以利用该函数关闭router的页面返回询问对话框
```
router.hideAlertBeforeBackPage();    
```
getParams，获取发起跳转的页面往当前页传入的参数
```
router.getParams();
```

router实现模块间跳转

利用pushUrl，注意：此时需要使用模拟器，并且需要部署要跳转的hsp包才可以，这种跳转方式不需要配置依赖

  ```
     router.pushUrl({
       url: '@bundle:com.aaa.studu_case/library/ets/pages/Index'
     })
  ```

利用路径跳转 pushNamedRoute
- 在想要跳转到的共享包页面里，给@Entry修饰的自定义组件命名
```
 @Entry({ routeName: 'hsp_share_index' })
```
- 需要在当前包引入对于share包的依赖oh-package.json5
```
"dependencies": {
 "@ohos/demo": "file:../library"
}
```
- 配置成功后需要在跳转的页面中引入命名路由的页面
```
import("@ohos/demo/src/main/ets/pages/Index");
```
- 跳转共享包
```
 router.pushNamedRoute({
   name: 'hsp_share_index'
 })
```