鸿蒙路由的简单封装

376 阅读1分钟

鸿蒙开发学习

提供简单的封装思路,可对路由跳转进行拦截进行其他业务处理,暂时只在测试中使用。
作用:
页面跳转前进行某些处理处理。如一些页面需要进行统一处理后再进行路由跳转等

使用:

import router from '@ohos.router';
import CstRouter from '../common/utils/Router'

@Entry
@Component
struct Me {
 goNext(){
  CstRouter.getCurrentInstance().push({
    params:{
      data:'1233'
    },
    url:'pages/page2',
    cb:(status , err) => {
      console.log('跳转成功' + status)
    }
  })
  build(){
    Column(){
      Text('ccccccccc').onClick(() => {
        console.log('5555' , JSON.stringify(router.getState()))
        console.log('5555' , JSON.stringify(router.getLength()))
        console.log('5555' , JSON.stringify(router.getParams()))
        console.log('6666666' , JSON.stringify(CstRouter.getCurrentInstance().getRouterList().length));
       
      })
      Button('返回上一级').onClick(() => {
        CstRouter.getCurrentInstance().back()
      })
      Button('返回index').onClick(() => {
        CstRouter.getCurrentInstance().back({url:'pages/Index'})
      })
    }

  }
}

封装:

import router from '@ohos.router'
interface RouterOptionsIn {
  url:string
  params ?: object,
  mode ?: router.RouterMode
  cb ?: (status : boolean  , err ?: Error) => void
}
export default  class CstRouter {
  private routerList:(router.RouterOptions)[] = [{url:'pages/Index'}]
  private static instance:CstRouter = null
  constructor() {}
  static getCurrentInstance(){
      if(!CstRouter.instance){
        CstRouter.instance = new CstRouter()
      }
    return CstRouter.instance
  }
  getRouterList(){
    return this.routerList
  }
  getCurrentRouter(){
    return router.getState()
  }

   interceptor(options:router.RouterOptions):boolean{
    //  to do something
    return true
  }
   push(options:RouterOptionsIn){
    let flag = this.interceptor(options)
    if(!options.mode) options.mode = router.RouterMode.Standard
    if(!options.cb) options.cb = () => {}
    if(flag){
      this.routerList.push({url:options.url , params:options.params})
      let routerPromise = router.pushUrl({url:options.url , params:options.params} , options.mode)
      routerPromise.then(() => {
        options.cb(true)
      }).catch(err => {
        this.routerList.pop()
        options.cb(false , err)
      })
    }
  }

   replace(options:RouterOptionsIn){
    let flag = this.interceptor(options)
    if(!options.mode) options.mode = router.RouterMode.Standard
    if(!options.cb) options.cb = () => {}
    if(flag){
      let currentRoute = this.routerList.pop()
      let routerPromise = router.replaceUrl({url:options.url , params:options.params} , options.mode)
      routerPromise.then(() => {
        this.routerList.push({url:options.url , params:options.params})
        options.cb(true)
      }).catch(err => {
        this.routerList.push(currentRoute)
        options.cb(false , err)
      })
    }
  }

  back(options?:RouterOptionsIn){
    if(!options){
      if(this.routerList.length > 1){
        this.routerList.pop()
      }
      router.back()
    }else{
      let idx = this.routerList.length -1
      if(this.routerList.length > 1){
        for( ; idx >= 0 ; idx--){
          if(this.routerList[idx].url === options.url) break
        }
        if(idx >= 0) {
          this.routerList = this.routerList.slice(0 , idx+1)
        }
        router.back(options)
      }
    }
  }

}