HarmonyOS鸿蒙Next中组件库页面和原生页面怎么互相跳转？？？？

开发者你好，修改组件库跳转逻辑在组件库的“其他方式登录”按钮事件中，替换为跳转到你的自定义页面，并且在你的自定义页面添加返回逻辑。使用Navigation实现跳转逻辑。如果自定义页面在独立模块中，使用命名路由跳转：参考：如何实现跨模块的页面跳转功能。以下是利用Navigation进行路由跳转参考：

【背景知识】

• Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。
• 从API Version 10开始，推荐使用NavPathStack配合navDestination属性进行页面路由。

【解决方案】

• 第一步：创建首页Index和需要跳转的两个页面Page1和Page2，初始代码如下：

// Index.ets
@Entry
@Component
struct Index {
  private pathStack: NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pathStack) {
      Column({space: 10}) {
        Text('首页')
          .fontSize(60)
        Button('跳转page_name_1')
          .width(200)
          .onClick(() => {
            this.pathStack.pushPathByName('page_name_1', null)
          })
        Button('跳转page_name_2')
          .width(200)
          .onClick(() => {
            this.pathStack.pushPathByName('page_name_2', null)
          })
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .width('100%')
    }
  }
}

// Page1.ets
@Component
export struct Page1{
  build() {
    NavDestination() {
      Column(){
        Text('Page1')
          .fontSize(60)
      }
      .height('100%')
      .width('100%')
    }
  }
}

// Page2.ets
@Component
export struct Page2 {
  build() {
    NavDestination() {
      Column() {
        Text('Page2')
          .fontSize(60)
      }
      .height('100%')
      .width('100%')
    }
  }
}

• 第二步：配置路由名称的跳转页面，对于代码this.pathStack.pushPathByName()中的第一个参数的页面名称page_name_1或者page_name_2，需要进行对应的映射配置。有两种配置方法，选择其中一种即可：
  • PageMap函数映射：通过@Builder修饰一个自定义映射函数PageMap，并将其传入Navigation组件的.navDestination()函数中，Navigation根据PageMap函数将参数名称page_name_1或page_name_2路由到对应页面完成跳转。

import { Page1 } from './Page1';
import { Page2 } from './Page2';

@Entry
@Component
struct Index {
  private pathStack: NavPathStack = new NavPathStack();

  @Builder
  PageMap(name: string) {
    if (name === "page_name_1") { // 如果pushPathByName的第一个参数为"page_name_1"， 路由到Page1
      Page1()
    } else if (name === "page_name_2") { // 如果pushPathByName的第一个参数为"page_name_2"， 路由到Page2
      Page2()
    }
  }

  build() {
    Navigation(this.pathStack) {
      Column({ space: 10 }) {
        Text('首页')
          .fontSize(60)
        Button('跳转page_name_1')
          .width(200)
          .onClick(() => {
            this.pathStack.pushPathByName('page_name_1', null)
          })
        Button('跳转page_name_2')
          .width(200)
          .onClick(() => {
            this.pathStack.pushPathByName('page_name_2', null)
          })
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .width('100%')
    }
    .navDestination(this.PageMap)
  }
}

• route_map配置映射：通过route_map.json文件进行映射。
  • 在resources/base/profile文件夹中创建route_map.json文件，在src/main文件夹中的module.json5文件中配置route_map.json映射文件的位置。
  • 完成上述配置后，pushPathByName函数会根据route_map.json中的映射进行路由。注意进行route_map.json的配置前，需先在Page1.ets和Page2.ets中配置组件导出的函数，代码如下：

// Page1.ets
@Builder
export function Page1Builder() {
  Page1()
}

@Component
export struct Page1{
  build() {
    NavDestination() {
      Column(){
        Text('Page1')
          .fontSize(60)
      }
      .height('100%')
      .width('100%')
    }
  }
}

// Page2.ets
@Builder
export function Page2Builder() {
  Page2()
}

@Component
export struct Page2{
  build() {
    NavDestination() {
      Column(){
        Text('Page2')
          .fontSize(60)
      }
      .height('100%')
      .width('100%')
    }
  }
}

- route_map.json文件中的路由配置如下：

{
  "routerMap": [
    {
      "name": "page_name_1",
      "pageSourceFile": "src/main/ets/pages/Page1.ets",
      "buildFunction": "Page1Builder",
      "data": {
        "description": "Page1"
      }
    },
    {
      "name": "page_name_2",
      "pageSourceFile": "src/main/ets/pages/Page2.ets",
      "buildFunction": "Page2Builder",
      "data": {
        "description": "Page2"
      }
    }
  ]
}

- 关键参数含义解释：
  - `name`：`this.pathStack.pushPathByName`的第一个参数；
  - `pageSourceFile`：待跳转页的相对路径；
  - `buildFunction`：在Page1.ets或page2.ets中导出整个组件的函数名称；