HarmonyOS Navigation 设置路由拦截直接异常，无法执行？

Question

Navigation 设置路由拦截直接异常，无法执行

interface item {
  url?:string,
  label:string
}

@Entry
@Component
struct NavigationExample {
  @State TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
  private arr: number[] = [1, 2, 3];
  pathStack: NavPathStack = new NavPathStack()
  @Builder ToolBar() {
    Row() {
      this.toolBarItem({label:'fun1'})
      this.toolBarItem({label:'fun2'})
      this.toolBarItem({label:'fun3'})
    }.borderRadius(20).backgroundColor('red')
  }
  @Builder toolBarItem($$:item) {
    Column(){
      Image($r('app.media.vip_manage_view_unbing'))
      Text($$.label)
    }
  }

  aboutToAppear() {
    this.pathStack.setInterception({
      willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
        operation: NavigationOperation, animated: boolean) => {
        if (typeof to === "string") {
          console.log("target page is navigation home page.");
          return;
        }
        // 将跳转到PageTwo的路由重定向到PageOne
        let target: NavDestinationContext = to as NavDestinationContext;
        if (target.pathInfo.name === 'PageTwo') {
          target.pathStack.pop();
          target.pathStack.pushPathByName('PageOne', null);
        }
      }
    })
  }

  jump(){
    this.pathStack.pushPathByName('PageOne', null)
  }
  build() {
    Column() {
      Navigation(this.pathStack) {
        List({ space: 12 }) {
          ListItem() {
            Button("跳转1").onClick((event: ClickEvent) =>{
              this.jump()
            })
          }
          ListItem() {
            Button("跳转2").onClick((event: ClickEvent) => {

            })
          }
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主标题")
      .mode(NavigationMode.Stack)
      .hideTitleBar(true)
      .toolbarConfiguration(this.ToolBar)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

Answer 1

navigation可以封装公共路由栈方便路由管理和拦截。

具体操作

1. 创建一个共享hsp模块library，封装一个公共的类CommonRouter，代码如下（并导出这个类export { CommonRouter } from './src/main/ets/utils/utils'，然后在oh-package.json5的dependencies里面配置配置公共类库"@ace/library": "file:./library"）：

export class CommonRouter {
  static stack: NavPathStack;
  static instance: CommonRouter;

  // 这个一定要先初始化init，才能调用getInstance接口。
  static init(stack: NavPathStack) {
    CommonRouter.stack = stack;
  }

  static getInstance() {
    if (!CommonRouter.instance) {
      CommonRouter.instance = new CommonRouter();
    }
    return CommonRouter.instance;
  }

  pushPathByName(routeName: string) {
    CommonRouter.stack.pushPathByName(routeName, '')
  }

  pop() {
    CommonRouter.stack.pop()
  }

  clear() {
    CommonRouter.stack.clear()
  }
}

2. entry主容器@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()。并在aboutToAppear时，初始化CommonRouter，即CommonRouter.init(this.pageInfos);

// Index.ets
import { PageOneTmp } from './PageOne'
import { pageTwoTmp } from './PageTwo'
import { CommonRouter, pageHsp } from "@ace/library"

@Entry
@Component
struct NavigationExample {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()

  aboutToAppear() {
    CommonRouter.init(this.pageInfos);
  }

  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      PageOneTmp()
    } else if (name === 'pageTwo') {
      pageTwoTmp()
    }
    else if (name === 'pageHsp') {
      pageHsp()
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPageOne', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'pageOne' }) //将name指定的NavDestination页面信息入栈
          })
        Button('pushPageTwo', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'pageTwo' }) //将name指定的NavDestination页面信息入栈
          })
      }
    }.title('NavIndex')
    .navDestination(this.PageMap)
  }
}

3、在其他页面entry/hsp/har中引入公共类import { CommonRouter } from "@ace/library";然后调用CommonRouter.getInstance().pushPathByName('pageTwo')，CommonRouter.getInstance().clear()，CommonRouter.getInstance().pop()即可.