首先规划一下项目的功能结构：

我们发现要由广告页跳转到布局页，可以用Navigation组件导航来实现页面间的跳转。

关于组件导航的详细用法可以去鸿蒙开发者官网查看：组件导航(Navigation) (推荐)-设置组件导航和页面路由-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者。

含有NavDestination()的代码是子页面，我们用这个代码去编辑子页面，在src/main/ets/pages下创建新的Start.ets页面文件，用于显示广告。

还需要一个用于布局的页Layout.ets。

在跳转目标模块的配置文件module.json5添加路由表配置：

1
2
3
4
5
{
    "module" : {
		"routerMap": "$profile:route_map"
    }
}

添加完路由配置文件地址后，需要在工程resources/base/profile中创建route_map.json路由表文件。添加如下配置信息：

1
2
3
4
5
6
7
8
9
10
11
12
{
    "routerMap": [
        {
            "name": "PageOne",
            "pageSourceFile": "src/main/ets/pages/PageOne.ets",
            "buildFunction": "PageOneBuilder",
            "data": {
              "description" : "this is PageOne"
            }
        }
    ]
}

有几个页面就需要配置几个对象。

将Navigation组件代码放到Index.ets文件中：

控制跳转的对象要是同一个，因此记得将pageStack改名成pathStack。

1
this.pathStack.pushPathByName("PageOne", null, false);

这里规定的就是跳转到哪个页面，而这个页面在之前的路由表文件里已经定义了。显然，我们一开始要跳转到Start页面。

.hideNavBar(true)是指不会把自己放到控制跳转的对象里，效果就是之后点返回的时候不会返回到这个导航页，而是直接退出了APP，因此尽量要加上。

组件导航不支持预览，需要在模拟器中查看效果。