前言
上篇文章，针对Navigation做了简单的分析，无论是静态配置还是动态配置，都有着手动配置的需要，本篇文章就是要解决手动配置，利用路由库和插件实现自动配置的需求。
本篇文章大纲如下：
1、主页面和子页面模版（了解）
2、封装统一路由静态库（了解）
3、分析哪些需要插件自动完成（了解）
4、路由库和插件依赖
5、结合标题栏组件简化模版
6、路由库功能调用
7、简单总结
一、主页面和子页面模版（了解）
Navigation是路由容器组件，一般作为首页的根容器，也就是说，我们只在首页面使用即可，对于所有的子页面使用NavDestination即可，项目中的页面，无外乎首页面和子页面，首页面还好，书写一次即可，而子页面就非常非常的多了，所以，需要针对模版进行抽取。
以下简单贴出两个模版，此模版必须在有统一路由库的基础之上进行使用。
主页面模版：
@Entry @Component struct Index { private pageStack: NavPathStack = new NavPathStack() aboutToAppear() { RouterModule.createRouter(RouterNameConstants.ENTRY_HAP, this.pageStack); } @Builder routerMap(builderName: string, param: object) { RouterModule.getBuilder(builderName).builder(param); } build() { Navigation(this.pageStack) { RelativeContainer() { //其他UI } .width('100%') .height('100%') }.width('100%') .height('100%') .hideTitleBar(true) .navDestination(this.routerMap); } }
子页面模版：
@Component struct TestPage { build() { Column() { Text("子页面") } .width('100%') .height('100%') } } @Builder export function TestBuilder(value: object) { NavDestination() { TestPage() } .hideTitleBar(true) } const builderName = BuilderNameConstants.Test; if (!RouterModule.getBuilder(builderName)) { const builder: WrappedBuilder<[object]> = wrapBuilder(TestBuilder); RouterModule.registerBuilder(builderName, builder); }
以上两个模版，特别是子页面，我们不可能每创建一个页面都要书写这么多冗余代码，显然是不合理的，在路由库和插件依赖一项中，会针对其进行抽取。
二、封装统一路由静态库（了解）
要实现各个动态组件的交互，比如主模块和动态共享包，动态共享包和动态共享包，动态共享包和静态共享包等等之间进行跳转，必须需要一个统一的路由组件库进行桥梁作用，这个库，可以直接放到业务层，主要的作用就是路由的相关功能配置，具体的相关工具，可以看上一篇文章。
三、分析哪些需要插件自动完成
在正常的开发中，针对页面，我们正常书写即可，无须其他的额外配置，路由的操作应该和移动端的路由操作一致，只需要一个简单的注解就可以，那么基于此逻辑，其一、子页面中注册配置，NavDestination配置等等都是可以抽取的。
正常的子页面应该清洁无瑕，就是简单的UI组件，其他的都统统交给插件自己生成，自己实现配置。
@RouterPath("entry_test") @Component export struct TestPage { build() { //UI组件 } }
其二，就是每个子页面的动态导入import，在上一篇文章中，是需要手动的在初始化中进行配置，针对这个繁琐的程序，也应该交由插件进行配置。
四、路由库和插件依赖
以上三点只是做一个简单的了解，以哪些模版作为生成，以哪些代码需要抽取，这些步骤都已经做了封装，我们简单看下，封装后的路由功能实现。
第一步，配置依赖项
方式一：在需要Module中的oh-package.json5中设置三方包依赖，配置示例如下：
"dependencies": { "@abner/router": "^1.0.2"}
方式二：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。建议：在使用的模块路径下进行执行命令。
ohpm install /router
第二步，配置插件
配置插件前，请务必保障你的所有用到路由的Module都依赖了@abner/router，当然你也可以采用中间件的方式进行依赖。
依赖插件
找到项目中的hvigor目录，在hvigor-config.json5文件中dependencies配置插件。
代码如下：当前版本为：1.0.8
"dependencies": { "ohos-router": "1.0.8" }
执行插件方法，打开根目录中的hvigorfile.ts文件，在plugins数组中导入方法：
plugins:[ abnerRouter() ]
导包：
import { abnerRouter } from 'ohos-router/router-plugin';
插件完成之后，编译项目，你会发现，每个Module中，都会生成一个路由配置文件，以Module名字+RouterConfig为文件命名。
此路由配置文件为自动生成，无特殊情况下无须改动，当然,再有特殊情况下，你可以进行手动更正。
主页面模版
@Entry @Component struct Index { private navPathStack: NavPathStack = new NavPathStack() aboutToAppear() { routerInitNavPathStack(this.navPathStack) } @Builder routerMap(builderName: string, param: Object) { routerReturnBuilder(builderName).builder(param) } build() { Navigation(this.navPathStack) { RelativeContainer() { //其他组件 } .height('100%') .width('100%') }.navDestination(this.routerMap) } }
子页面模版
子页面没有模版，正常书写UI即可，需要配置一个注解@RouterPath设置一个别名即可，此别名需要模块名字+别名。
@RouterPath("entry_test") @Component export struct TestPage { build() { //UI组件 } }
五、路由库功能调用
1、普通跳转
startPage支持自己Module下跳转，同样也支持跨组件模式跳转。
startPage("entry_main") //entry_main和页面注解要一一对应
2、带数据跳转
支持常见的数据传递，比如对象、字符串、数组等等
字符串
startPage("shared_show_params", { param: "一个字符串" })
number
startPage("shared_show_params", { param: 100 })
boolean
startPage("shared_show_params", { param: true })
数组
startPage("shared_show_params", { param: [1, 2, 3, 4, 5, 6] })
对象
startPage("shared_show_params", { param: new SharedBean() })
直接传递对象
startPage("shared_show_params", { param: { "name": "AbnerMing", "age": 20 } })
传递Map
let map = new HashMap<string, Object>() map.set("name", "AbnerMing") map.set("age", 18) startPage("shared_show_params", { param: map })
3、接收参数
通过getRouterParams()方法获取上一个页面传递的数据。
aboutToAppear(): void { let params = routerGetParams() // let map = params as number//number // let map = params?.toString() //string // let map = params as boolean //boolean // let map = params as string[] //数组 // let map = params as SharedBean //对象 // let map = params as HashMap<string, Object>//如果是传递的map，自己遍历即可 }
4、返回上一页面
finishPage()
5、返回指定页面
传递页面路由即可。
finishPageToName("entry_back_01")
6、直接返回首页
routerClearPage()
7、返回带数据
跳转时，使用result进行监听返回的参数
startPage("static_return_params", { result: (params) => { //获取返回的数据 console.log("==========" + params?.toString()) } })
销毁页面时携带返回数据即可。
finishPage({ param: "我是返回的数据" })
8、关于生命周期
当子组件使用了NavDestination之后，会和组件的生命周期发生冲突，为解决这个问题，大家可以使用NavDestination的生命周期进行解决。
目前提供了setRouterLifeCycle方法用于监听其生命周期，可以在子页面中进行实现。
案例如下：
aboutToAppear(): void { setRouterLifeCycle({ onShown: () => { console.log("==========显示") }, onHidden: () => { console.log("==========隐藏") } }) }
相关方法一览：
方法 |
概述 |
onWillAppear |
NavDestination创建后，挂载到组件树之前执行，在该方法中更改状态变量会在当前帧显示生效 |
onAppear |
通用生命周期事件，NavDestination组件挂载到组件树时执行。 |
onWillShow |
NavDestination组件布局显示之前执行，此时页面不可见（应用切换到前台不会触发）。 |
onShown |
NavDestination组件布局显示之后执行，此时页面已完成布局。 |
onWillHide |
NavDestination组件触发隐藏之前执行（应用切换到后台不会触发）。 |
onHidden |
NavDestination组件触发隐藏后执行（非栈顶页面push进栈，栈顶页面pop出栈或应用切换到后台） |
onWillDisappear |
NavDestination组件即将销毁之前执行，如果有转场动画，会在动画前触发（栈顶页面pop出栈） |
onDisappear |
通用生命周期事件，NavDestination组件从组件树上卸载销毁时执行。 |
三、常见方法汇总
方法 |
参数 |
概述 |
startPage |
builderName: string, model?: RouterModel |
跳转页面 |
replacePage |
builderName: string, model?: RouterModel |
替换页面栈操作 |
startPageByName |
name: string, param: Object, onPop: Callback<PopInfo>, animated?: boolean |
将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。 |
startPageDestination |
info: NavPathInfo, options?: NavigationOptions |
将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果，具体根据options中指定不同的LaunchMode，有不同的行为。 |
startPageDestinationByName |
name: string, param: Object, onPop: Callback<PopInfo>,animated?: boolean |
将name指定的NavDestination页面信息入栈，传递的数据为param，并且添加用于页面出栈时处理返回结果的OnPop回调，使用Promise异步回调返回接口调用结果。 |
finishPage |
model?: PopModel |
销毁页面 |
finishPageToName |
name: string, model?: PopModel |
回退路由栈到由栈底开始第一个名为name的NavDestination页面。 |
routerSetInterception |
interception: NavigationInterception |
设置Navigation页面跳转拦截回调。 |
routerClearPage |
animated?: boolean |
清除栈中所有页面 |
routerGetParentNavPathStack |
无参 |
清除栈中所有页面 |
routerDisableAnimation |
value: boolean |
关闭（true）或打开（false）当前Navigation中所有转场动画。 |
routerMoveIndexToTop |
index: number, animated?: boolean |
将index指定的NavDestination页面移到栈顶。 |
routerMoveToTop |
name: string, animated?: boolean |
将index指定的NavDestination页面移到栈顶 |
routerPopToIndex |
index: number, result: Object, animated?: boolean |
回退路由栈到index指定的NavDestination页面，并触发onPop回调传入页面处理结果。 |
routerRemoveByName |
name: string |
将页面栈内指定name的NavDestination页面删除。 |
routerRemoveByIndexes |
indexes: Array<number> |
将页面栈内索引值在indexes中的NavDestination页面删除。 |
routerReplacePathByName |
name: string, param: Object, animated?: boolean |
将当前页面栈栈顶退出，将name指定的页面入栈 |
routerRemoveByNavDestinationId |
navDestinationId: string |
将页面栈内指定navDestinationId的NavDestination页面删除。navDestinationId可以在NavDestination的onReady回调中获取，也可以在NavDestinationInfo中获取。 |
routerInitBuilder |
builderName: string, builder: WrappedBuilder<[Object]> |
初始化Builder |
routerInitConfig |
routerConfig?: RouterConfig[] |
初始化配置 |
routerGetParams |
无参 |
获取传递的参数 |
六、结合标题栏组件简化模版
如果你想结合我的另一个开源库bar进行使用，那么需要更换插件，由ohos-router切换到abner-router，其他都不变
"abner-router": "1.0.0"
依赖之后的模版，就非常的简单了，对于首页面，只需要使用MainView包裹即可。
首页模版
@Entry @Component struct Index { build() { RelativeContainer() { MainView() { //其他组件 } } .height('100%') .width('100%') } }
子页面模版
@Component struct TestPage { build() { TitleLayout({ title:"我是标题" }) { //任意组件 } } }
七、简单总结
使用了插件和路由库之后，在每个Module下都会生成一个路由配置文件，以Module名字+RouterConfig为文件命名，此路由配置文件，也会在AbilityStage中，通过routerInitConfig方法进行自动配置。
子页面注解的作用很简单，用来标记页面的唯一标识，也就是别名，要求格式为：Module名字+下划线+定义的别名。
如entry Module下：entry_test1,entry_test2等等
如test Module下：test_test1,test_test2等等
如果你想对Module下的路由进行统一管理，便于查找路由和修改路由，目前进支持在Module根目录下进行配置。
比如entry目录下，你可以创建任意的管理类EntryRouter：
export class EntryRouter { static EntryTest= "entry_test"//测试页面 }
使用不变，直接获取即可。
@RouterPath(EntryRouter.EntryTest) @Component export struct TestPage { build() { //UI组件 } }
