鸿蒙开发：路由组件升级，支持页面一键创建

前言

router组件自2024年推出以来，目前已经升级了9个版本，对应的插件也迭代了25次，可以说，本着简单好用的特性，帮助了许许多多的开发者，如今，我又对其做了定向的优化，除了支持模块之间的过滤，也同步支持了插件创建页面的能力。

在插件1.2.5版本之前，无论是动态共享包，还是静态共享包，都会在其模块下动态生成路由配置文件，并且在初始化中也会生成初始化代码，这就造成了一个问题，比如，某一个共享包只是拿来被其他模块依赖，并没有可用于展示的UI，不应该生成配置文件和初始化代码，但是，仍然生成了，删也删不掉；在1.2.5版本中，针对这个问题，做了优化，支持可过滤模块。

详细的使用说明，大家可以去中心仓库中查看：

ohpm.openharmony.cn/#/cn/detail...

和之前相比，无非就是执行插件方法发生了变更，导包由abnerRouter切换为abnerRouterFilter。

TypeScript 复制代码

import { abnerRouterFilter } from 'ohos-router/router-plugin';

调用方法由abnerRouter切换为abnerRouterFilter。

abnerRouterFilter方法有两个参数，第一个参数是否开启插件，默认true开启，如果你不想执行插件，可以设置为false，这样，插件里的逻辑就不会再执行。第二个参数是过滤的模块名字，支持多个，如果你不想某一个模块进行生成配置和初始化，就可以设置到这里。

TypeScript 复制代码

plugins:[
  abnerRouterFilter(true,["你的过滤模块"])
]

页面创建

在之前的版本中，针对UI页面组件创建，全都是手动创建一个ArkTs文件，然后书写代码，进行路由注解，简单代码如下：

TypeScript 复制代码

@RouterPath("entry_test")
@Component
export struct TestPage {
  build() {
    //UI组件
  }
}

虽然代码量不多，但架不住页面多，每次创建也是很耗费时间，于是，便开发了一个创建页面的插件。

下载地址如下：

abnerming888.github.io/vip/load/Ha...

下载之后，选择本地安装插件方式进行安装。

插件安装之后，在需要创建UI页面的地方，右键找到Router Page选择合适的进行创建即可。

有两个选项，第一个是Default Page，创建时，只需要传递页面名字即可，路由会自动填充为当前模块名字+页面名字。

填好名字，回车即可，比如我写的是TestPage，回车之后，就会在当前的目录下创建一个TestPage.ets文件，实现一个简单的UI页面，后面就可以在这里进行更改。

TypeScript 复制代码

import { RouterPath } from "@abner/router"

@RouterPath("entry_TestPage")
@Component
export struct TestPage {
  @State message: string = 'Hello TestPage';

  build() {
    RelativeContainer() {
      Text(this.message)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
}

第二个选项是Router Name Page，和第一个的区别是，多了一个路由别名。

生成的代码，和第一种一样，唯独就是路由那里，改成了你设置的路由名字。

一般情况下，在实际的开发中，都会有自己的路由管理类，不会直接在文件中写死，所以，具体的路由地址配置，请按照自己的项目来设置。

鸿蒙开发：路由组件升级，支持页面一键创建

前言

页面创建

相关总结