大家好，这里是鸿蒙开天组，今天我们来学习路由的相关知识。

1. 路由

页面路由指的是在应用程序中实现不同页面之间的跳转，以及数据传递。通过 Router 模块就可以实现这个功能.

1.1. 创建页面

之前是创建的文件，使用路由的时候需要创建页面，步骤略有不同

1. 方法 1：直接右键新建Page（常用）
2. 方法 2：单独添加页面并配置

1.1.1. 直接右键新建Page

创建的是页面，选项不要选错了

1.1.2. 单独添加页面并配置

1.新建页面

pages/DetailPage.ets

@Entry
@Component
struct DetailPage {
  build() {
    Column({ space: 15 }) {
      Text('Detail Page')
        .fontSize(40)
      Button('Back')
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2.调整配置

小技巧:

• 按两次 shift 在弹出的界面中输入文件名，可以快速定位

在main_pages.json中添加

{
  "src": [
    "pages/Index",
+    "pages/DetailPage"
  ]
}

TIP

• 手动新建一个页面（ets）文件，需要在 main_pages.json 中手动配置
• 可以自动创建（会自动添加配置）
• 删除页面不会自动删除配置，需要手动删除

1.2. 页面跳转

接下来学习路由的跳转，页面跳转是开发过程中的一个重要组成部分。

在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面。接下来咱们分场景来讲解这部分的内容:

1. 页面跳转与后退
2. 路由模式
3. 参数传递

1.2.1. 页面跳转与后退

首先来看看看使用频率最高的 跳转和 后退，核心就是使用 router 的方法

// 1. 导入
import router from '@ohos.router';

// 2.调用方法-普通跳转(可以返回)
router.pushUrl({
  url:'页面地址'
})

// 2.调用方法-替换跳转（无法返回）
router.replaceUrl({
  url:'页面地址'
})

// 2.调用方法-返回（）
router.back()

router.pushUrl() 和 router.replaceUrl()。都可以跳转页面，区别为是否会替换当前页。

• router.pushUrl()：目标页面不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。
• router.replaceUrl()：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

划重点：pushUrl 可以返回 replaceUrl 无法返回

1.2.2. 页面栈

页面栈是用来存储程序运行时页面的一种数据结构，遵循先进后出的原则，咱们结合刚刚的代码来说明一下：

页面栈的最大容量为32个页面

1.2.2.1. pushUrl的情况

先来看看 pushUrl的情况

1. 默认打开首页 → 首页入栈
2. pushUrl 去详情页 → 详情页入栈
3. back 返回上一页 → 详情页出栈
4. 此时页面栈中应该只有一个页面

整一个过程中，都可以 router.getLength 进行查看

1.2.2.2. replaceUrl 的情况

再来看看replaceUrl的情况

1. 默认打开首页 → 首页入栈
2. replaceUrl 去详情页 → 详情页替换首页，首页销毁
3. back 无法返回 → 没有上一页

1.2.2.3. 页面栈相关 api

为了让咱们更好的获取页面栈的信息，router 模块也提供了对应的 api 以供使用

// 获取页面栈长度
router.getLength()

// 获取页面状态 
let page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);

// 清空页面栈
router.clear()

1.3. 路由模式

路由提供了两种不同的跳转模式，不同模式的决定了页面是否会创建多个实例

• Standard：多实例模式，也是默认情况下的跳转模式。目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。
• Single：单实例模式。如果目标页面的url已经存在于页面栈中，则会将离栈顶最近的同url页面移动到栈顶，该页面成为新建页。如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。

简而言之：

1. Standard：无论之前是否添加过，一直添加到页面栈【常用】
2. Single：如果之前加过页面，会使用之前添加的页面【看情况】

// 多实例模式下，router.RouterMode.Standard参数可以省略。

// pushUrl 和 replaceUrl 均可以在第二个参数设置 【路由模式】
router.pushUrl(options,mode)
router.replaceUrl(options,mode)

参数名	类型	必填	说明
options	RouterOptions	是	跳转页面描述信息。
mode	RouterMode	是	跳转页面使用的模式。

RouterMode参数说明

名称	说明
Standard	多实例模式，也是默认情况下的跳转模式。 目标页面会被添加到页面栈顶，无论栈中是否存在相同url的页面。 说明： 不使用路由跳转模式时，则按照默认的多实例模式进行跳转。
Single	单实例模式。 如果目标页面的url已经存在于页面栈中，则该url页面移动到栈顶。 如果目标页面的url在页面栈中不存在同url页面，则按照默认的多实例模式进行跳转。

1.3.1. Strandard模式

使用 Strandard 模式，在电影和演员页面反复跳转时会持续往页面栈中添加新的页面，浪费内存

1.3.2. Single模式

使用 Single 模式，在页面和演员页面反复跳转时会将已有的页面移到栈顶，避免浪费内存

1.4. 参数

接下来看看另外一个挺常见的需求：传递参数

日常开发中有这样的场景：点击不同的电影，商品，标题。。。跳转到与之对应的详情页面。、

1.4.1. 参数传递及接收

首先来看看如何实现页面参数传递和获取

// -----------传递参数------------
// 普通跳转 并 传递参数
router.pushUrl({
  url:'地址',
  params:{
    // 以对象的形式传递参数
  }
})
// 覆盖跳转并传递参数
router.replaceUrl(
  url:'地址',
  params:{
    // 以对象的形式传递参数
  }
)
// 返回并传递参数
router.back(
  url:'地址',
  params:{
    // 以对象的形式传递参数
  }
)

// -------------页面 B接收并解析参数------------
// aboutToAppear一会展开 （生命周期函数）
aboutToAppear(): void {
  // 1.确认内容
  console.log(JSON.stringify(router.getParams())) 
  // 2.通过 as 类型断言 转为具体的类型
  const params =  router.getParams() as 类型
  // 3. 通过点语法即可取值
  params.xxx 
} 

options参数说明

名称	类型	必填	说明
url	string	是	表示目标页面的url，可以用以下两种格式： - 页面绝对路径，由配置文件中pages列表提供，例如： - pages/index/index - pages/detail/detail - 特殊值，如果url的值是"/"，则跳转到首页。
params	object	否	表示路由跳转时要同时传递到目标页面的数据，切换到其他页面时，当前接收的数据失效。跳转到目标页面后，使用router.getParams()获取传递的参数

2. 共享元素转场

当路由进行切换时，可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。

链接

// 页面 A
组件(){
  
}
  .sharedTransition('标记', { duration: 500 })

// 页面 B
组件(){
  
}
  .sharedTransition('标记', { duration: 500 })

动画属性

名称	参数类型	是否必填	参数描述
duration	number	否	描述共享元素转场动效播放时长。 默认值：1000。 单位：毫秒。
curve	Curve | string | ICurve 10+	否	描述共享元素转场动效播放时长。 默认值：1000。 单位：毫秒。
delay	number	否	延迟播放时间。 默认值：0。 单位：毫秒。
motionPath	MotionPathOptions	否	运动路径信息。
zIndex	number	否	设置Z轴。
type	SharedTransitionEffectType	否	动画类型。 默认值：SharedTransitionEffectType.Exchange。

3. Navigation 组件

通过 Navigation 可以快捷的设置顶部的标题及返回

链接

优势：

1. 便捷设置返回和标题
2. 可以铺满全屏

 Navigation() {
  }
    .backgroundColor() // 背景色
    .title() // 标题
    .titleMode(NavigationTitleMode.Mini) // 标题+返回按钮的模式
    .backButtonIcon()// 自定义返回按钮的图片（如果需要的话）

好啦，今天的内容就到这里了，这里是鸿蒙开天组，我们下次再见！