# NavrouterPlugin

**Repository Path**: tang-yuyi2003/navrouter-plugin

## Basic Information

- **Project Name**: NavrouterPlugin
- **Description**: NavRouter插件，提供创建Navigation页面、自动将Navigation页面信息添加到RouterMap中、自动将页面名称维护到NavPageName表中，可简化用户创建Navigation页面的操作。
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-24
- **Last Updated**: 2025-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HarmonyOS, HarmonyOs插件, DevEcoStudio插件, navigation, Navigation插件

## README

# DevecoStudop Navrouter Plugin


## 一、插件简介

Navrouter 是一款便捷的插件，专为 HarmonyOs Next 项目设计，用于创建和管理 Navigation 页面。结合 @tangs/navrouter 库，您可以轻松创建和销毁 Navigation 页面，提升开发效率。

- **下载链接：** [NavRouter-1.1.0.jar](https://gitee.com/tang-yuyi2003/navrouter-plugin/blob/v1.1/v1.1.0/results/v1.1.0/NavRouter-1.1.0.jar)
- **使用视频：**https://www.bilibili.com/video/BV1ZtVfzLEAw/?vd_source=d658fcafe942c94261ccbfaa875d8f81
- **JetBrains：**https://plugins.jetbrains.com/plugin/27193-navrouter
- **@tangs/navrouter 库：** [ohpm.openharmony.cn](https://ohpm.openharmony.cn/#/cn/detail/@tangs%2Fnavrouter)

使用过程中如有任何问题，欢迎随时提交反馈：[Gitee Issues](https://gitee.com/tang-yuyi2003/navrouter-plugin/issues)



## 二、使用条件

为了获得最佳体验，建议您在 API Version 12 或更高版本中使用此插件。以下是使用前需要了解的事项：

- **自动应用依赖：** 插件初始化后，会自动应用 @tangs/navrouter 库，因为创建的页面需要依赖该库的Navigation模板组件。
- **支持的语言：** 目前仅支持 Arkts，暂不支持仓颉。
- **注意：** 使用此插件后，删除文件操作无法通过 `ctrl + z` 撤回。



## 三、安装和初始化

### 3.1  安装插件

您可以在Marketplace中搜索NavRouter来安装，如果没搜索到，则可通过链接将插件jar文件下载到本地，地址：https://gitee.com/tang-yuyi2003/navrouter-plugin/blob/v1.1/v1.1.0/results/v1.1.0/NavRouter-1.1.0.jar。

然后再DevEcoStudio中进入插件面板，点击设置后选择从磁盘安装。

<img src="./images/install_plugin_image.png">  

安装完成后如果提示要重启DevecoStudio，按照提醒完成即可。





### 3.2 初始化 NavRouter 配置

初始化 NavRouter 配置有两种模式，您可以根据项目情况进行选择：



#### 3.2.1 自定义模式

此模式适用于单模块项目，或已自行划分模块并确定 NavPageNames.ets 文件存放位置的项目。

**操作步骤：**

1. 选择路径：点击按钮，选择一个模块的 `ets` 目录下的文件夹。
2. 确认配置：点击确认后，插件会在所选目录下创建 NavPageNames.ets 文件。

<img src="./images/init_navrouter_zdy.png">



#### 3.2.2 默认模式

此模式适用于多模块项目，且尚未确定 NavPageNames.ets 文件存放位置的情况。此模式会自动创建一个名为 `NavRouter` 的静态共享模块（如需动态共享包，可自行[更改模块类型](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/har-to-hsp)）。

**操作步骤：**

1. 确认配置：直接点击确认。
2. 自动创建：插件会自动创建 `NavRouter` 模块，并在其中生成 NavPageNames.ets 文件。

<img src="./images/init_navrouter_mr.png">



#### 3.2.3 NavPageNames.ets文件说明

配置完成后，您可以通过 NavPageNames.ets 文件中的 `NavPageNames` 类获取页面名称。默认模式下，`NavPageNames` 类通过 `NavRouter` 模块导出。

<img src="./images/nav_page_names.png">

**重要提示：** NavPageNames.ets 文件是根据 router_map.json 中的页面配置自动生成的，请勿手动修改。手动修改的内容在下一次同步或页面创建、删除操作后将会失效。



#### 3.2.4 配置文件详解

插件会在项目根目录下创建 `navrouter-info.json` 配置文件，用于存储插件的配置信息。

**配置文件字段说明：**

- `navNamesPath`: NavPageNames.ets 文件的相对路径，可手动修改。修改后需重启 IDE 并同步文件。

- `model`: 初始化模式，值为 `custom` 或 `default`。

- `automaticDeletion`: 布尔值，指示是否在删除 Navigation 页面后自动更新配置文件。

- ```
  names
  ```

  : 各个页面的配置信息数组，与项目中所有 router_map.json 文件中的配置对应。

  - `routerMapPath`: 页面对应的 router_map.json 文件的相对路径。
  - `note`: 创建页面时填写的注释，将添加到 NavPageNames.ets 和页面配置中。
  - `filePath`: 页面文件所在的路径。
  - `name`: 页面名称。



## 四、页面创建与删除

4.1 创建页面

在ets目录下任意位置右键，点击新建“Navigation页面”菜单后输入配置信息

<img src="./images/add_page.png">

点击确认后会在右键的那个文件夹或文件所在的文件夹中创建一个名为 输入的页面名称相同的 ets 文件，如果页面名称已经在任何一个router_map.json存在，则会在输入框后方提示并无法确定。

页面如下图所示

<img src="./images/nav_page.png">

页面中会默认使用一个TangsNavDestination的模板组件，您也可以直接将其删除，改成官方提供的NavDestination组件。

在需要跳转的时候便可通过NavPageNames获取到你创建的页面名称，从而进行跳转。如图Index.ets文件所示，使用NavRouter来进行跳转。



然后弹窗同理：

<img src="./images/nav_dialog.png">



4.2 删除页面或弹窗

我们随便删除一个Navigation页面，插件将自动将配置文件中与这个页面有关的文件删除掉；如果不需要自动删除配置，可以将navrouter_info.json中的 automaticDeletion 字段改为 false 就行。