Navigation组件页面跳转

Navigation

1.路由栈是自己维护的 :

Navigation里面展示的内容不是路由栈的内容，叫导航栏
在单列模式下，他是一个页面，在双列模式下，他是左侧边栏，右侧是路由界面

import { promptAction } from '@kit.ArkUI'@Entry
@Component
struct NavigationIndex {// 路由栈 自己维护navPathStack: NavPathStack = new NavPathStack()registerInterceptors() {this.navPathStack.setInterception({//跳转之前的拦截willShow: (f, t) => {//f  :来的信息//t  :去的信息if (typeof t === 'string' || typeof f === 'string') {return}// 404检测if (!t.pathInfo && f.pathInfo.name !== 'error') {f.pathStack.pushPath({ name: 'error' })return}if (t.pathInfo.name === 'mine') {const token = AppStorage.get('token')! as string || ''if (token === '') {promptAction.showToast({ message: '你没有权限访问我的页面' })//拦截！！！// t.pathStack.pop()//去登陆t.pathStack.pushPath({ name: 'LoginPage' })}}},//跳转之后的拦截didShow: () => {//场景 : 鉴权}})}build() {Navigation(this.navPathStack) {//还没有跳转就有内容Text('这是首页')Button('跳转至 - 我的').onAppear(() => {this.registerInterceptors()}).onClick(() => {this.navPathStack.pushPath({name: 'mine'})})}//单列 还是 双列.mode(NavigationMode.Stack).height('100%').width('100%').padding({ top: 50 })}
}

2.路由配置表

2.1 module.json5 ,routerMap

2.2  /ets / resources / base / profile / routerMap.json

配置路由栈

{"routerMap": [{"name": "mine","buildFunction": "MineBuilder","pageSourceFile": "src/main/ets/pages/Index/views.ets"},{"name": "LoginPage","buildFunction": "LoginPageBuilder","pageSourceFile": "src/main/ets/pages/Index/LoginPage.ets"},{"name": "error","buildFunction": "ErrorBuilder","pageSourceFile": "src/main/ets/pages/Index/ErrorPage.ets"}]
}

3.路由出口展示
必须被NavDestination包裹，展示内容可以被路由拦截器拦截

 我的页面：

@Builder
export function MineBuilder() {//虽然builder不能直接放自定义组件 ，但是这里可以Mine()
}@Component
struct Mine {navPathStack: NavPathStack = new NavPathStack()build() {//必须要有NavDestination包裹才能显示NavDestination() {Text('我的')Button('朋友圈').onClick(() => {this.navPathStack.pushPath({ name: 'admin' })})}.onReady((context) => {this.navPathStack = context.pathStack}).hideTitleBar(true)}
}

登录页面：

@Builder
export function LoginPageBuilder() {LoginPage()
}@Entry
@Component
struct LoginPage {navPathStack: NavPathStack = new NavPathStack()build() {NavDestination() {Column({ space: 24 }) {Image($r('app.media.ic_logo')).width(200)Row({ space: 12 }) {Text('账号')TextInput().layoutWeight(1)}Row({ space: 12 }) {Text('密码')TextInput().layoutWeight(1)}Row({ space: 12 }) {Button('登录').type(ButtonType.Normal).layoutWeight(1).onClick(() => {AppStorage.setOrCreate('token', '66666')//登录成功跳转到我的页面this.navPathStack.pushPath({ name: 'mine' })this.navPathStack.clear()//跳转到上一页// this.navPathStack.pop()})}}}.onReady((context) => {// context.pathStack 就是当前 navigation 组件的 路由栈this.navPathStack = context.pathStack}).height('100%').width('100%')}
}

404页面：

@Builder
function ErrorBuilder() {ErrorPage()
}@Component
struct ErrorPage {navPathStack: NavPathStack = new NavPathStack()build() {NavDestination() {Text('404~页面找不到啦')Button('去首页').onClick(() => {//去首页 ，清除页面栈，this.navPathStack.clear()})}//隐藏导航栏.hideTitleBar(true).onReady((context) => {this.navPathStack = context.pathStack})}
}