HarmonyOS鸿蒙Next中请教跳到主界面对应tab怎么实现

背景知识：

首页我们需要知道 Tabs 的切换方式是在属性中绑定一个 index 参数。现在我们只要记录一下当前的index是什么，将值传入到登录页面，在登录页面获取完登录信息后直接将值传回来，通过 Tabs 中与index参数绑定的值，修改这个值就可以回到原位了。不过其中涉及到一个页面的销毁和重新加载，在跳转到登录页面是使用getRouter().pushUrl，在登录页面跳转回来首页是要清理之前的页面，使用getRouter().clear() + getRouter().replaceUrl 进行处理。

问题解决：

代码如下：

//1、 我的/个人页面操作判断是否要去登录
import { ToastUtil } from "@yunkss/eftool"
import { MyAccount } from "../LoginPage"

@Component
export struct Mine {
    @State message: string = "我的"

    aboutToAppear(): void {
        console.log("MyApp: Mine -> aboutToAppear")

        console.log("MyApp: Mine -> 获取到的用户信息：" + JSON.stringify(this.user))
    }

    build() {
        Column() {
            Button(this.message)
                .fontSize(20)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)

            Button("判断是否要登录")
                .fontSize(20)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)
                .onClick(() => {
                    //判断是否登录成功
                    let ac = AppStorage.get("myAccount") as MyAccount
                    if (ac) {
                        ToastUtil.showToast("登录成功")
                    } else {
                        this.getUIContext().getRouter().pushUrl({
                            url: "pages/LoginPage",
                            params: { index: 1 }
                        })
                    }
                })
        }
        .width("100%")
        .height("100%")
        .backgroundColor(Color.Yellow)
    }
}



//登录页面 2、
//封装的登录信息实体
export class MyAccount {
    nick: string = ""
    avatar: string = ""
    userId: string = ""
}

@Entry
@Component
struct LoginPage {
    @State message: string = '登录页面';
    index = 0

    aboutToAppear(): void {
        let p = this.getUIContext().getRouter().getParams() as Record<string, number>
        this.index = p["index"]
    }

    build() {
        Column({ space: 15 }) {
            Text(this.message)
                .width("100%")
                .height("150")
                .textAlign(TextAlign.Center)
                .fontSize(20)
                .fontColor(Color.Black)
                .fontWeight(FontWeight.Bold)
                .textAlign(TextAlign.Center)
            Button("登录")
                .fontSize(20)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)
                .onClick(() => {
                    //模拟登录获取的值
                    let ac = new MyAccount()
                    ac.nick = "测试昵称"
                    ac.avatar = "xx.png"
                    ac.userId = "123456"
                    AppStorage.setOrCreate("myAccount", ac)

                    //跳转到首页
                    this.getUIContext().getRouter().clear()
                    this.getUIContext().getRouter().replaceUrl({
                        url: "pages/TabsPage",
                        params: { index: this.index }
                    })
                })

        }
        .height('100%')
        .width('100%')
    }
}


// 3、tab主页面
import { AppStorageV2, Font } from '@kit.ArkUI';
import { HomePage } from './content/HomePage';
import { Mine } from './content/Mine';

@Entry
@Component
struct TabsPage {
    private tabsController: TabsController = new TabsController();
    @State currentIndex: number = 0;
    pathStack: NavPathStack =
        AppStorageV2.connect(NavPathStack, 'navStack', () => new NavPathStack())!

    aboutToAppear(): void {
        let p = this.getUIContext().getRouter().getParams() as Record<string, number>
        if (p) {
          //获取到参数登录页过来的参数切换
            this.currentIndex = p["index"]
        }

    }

    @Builder
    tabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource,
        unselectIcon: Resource) {
        Column({ space: 5 }) {
            Image(this.currentIndex === targetIndex ? selectedIcon : unselectIcon)
                .width(24)
            Text(title)
                .fontSize(14)
                .fontColor(this.currentIndex === targetIndex ? '#0A59F7' : '#63AAAA')
                .textAlign(TextAlign.Center)
                .fontWeight(500)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
    }

    build() {
        NavDestination() {
            Tabs({
                barPosition: BarPosition.End,
                controller: this.tabsController,
                //绑定一个 状态变量进行提切换 tab
                index: this.currentIndex
            }) {
                TabContent() {
                    HomePage()
                }
                .tabBar(this.tabBarBuilder('主页', 0, $r('app.media.ic_home_sel'),
                    $r('app.media.ic_home_normal')))

                TabContent() {
                    Mine()
                }
                .tabBar(this.tabBarBuilder('我的', 1, $r('app.media.ic_friend_sel'),
                    $r('app.media.ic_friend_normal')))
            }
            .width("100%")
            .height("100%")
            .divider({
                strokeWidth: '2vp',
                color: Color.Gray,
            })
            .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
            .scrollable(false)
            .vertical(false)
            .onChange((index: number) => {
                this.currentIndex = index
            })
        }
        .width("100%")
        .height("100%")
        .onReady((context: NavDestinationContext) => {
            this.pathStack = context.pathStack;
        })
    }
}

真机演示：

返回的首页，再push到登录页

this.pageIndex.clear()
setTimeout(()=>{
  this.pageIndex.pushPathByName('login')
}, 300)