# NavPathStack如何在自己封装的公共类中使用

#### 问题现象

NavPathStack能在子组件中使用或者自己封装的公共类中使用吗，如何使用？

#### 效果预览

#### 背景知识

*   AppStorage：应用全局的UI状态存储。
*   Navigation：Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

#### 解决方案

1.  新增PublicUtils文件并定义跳转页面的公共方法。
    
    ```
    export class Tmp {
      pushPath(name: string) {
        (AppStorage.get('pathStack') as NavPathStack).pushPath({ name: name });
      }
    }
    ```
    
2.  将NavPathStack缓存起来。
    
    ```
    // Index.ets
    import { Tmp } from './PublicUtils';
    
    @Entry
    @Component
    struct Index {
      // 创建一个页面栈对象并传入Navigation
      private pathStack: NavPathStack = new NavPathStack();
      private InfoTmp: Tmp = new Tmp();
    
      aboutToAppear(): void {
        // 存储pathStack
        AppStorage.setOrCreate('pathStack', this.pathStack);
      }
    
      build() {
        Navigation(this.pathStack) {
          Button('click')
            .onClick(() => {
              // 调用pushPath方法并跳转到对应页面
              this.InfoTmp.pushPath('PageOne');
            });
        }
        .title('Main');
      }
    }
    ```
    
3.  PageOne页面：
    
    ```
    @Builder
    export function PageOneBuilder() {
      PageOne();
    }
    
    @Component
    export struct PageOne {
      build() {
        NavDestination() {
          Button('setInteractive');
        }
        .width('100%')
        .height('100%');
      }
    }
    ```
    
4.  在src/main目录下的工程配置文件module.json5中的module字段里配置"routerMap": "$profile:router\_map"，并在src/main/resources/base/profile目录下新增router\_map.json。router\_map.json示例参考如下：
    
    ```
    {
      "routerMap": [
        {
          "name": "PageOne",
          "pageSourceFile": "src/main/ets/pages/PageOne.ets",
          "buildFunction": "PageOneBuilder"
        }
      ]
    }
    ```