@ohos.router (页面路由) router.back 只能返回上一个页面/首页, 建议考虑增加一个返回前N(N>1)个页面功能

项目里发布文章是多个页面(文章编辑 & 文章发布)组成的, 当走到最后一步, 点击发布后 需要一下关闭2个页面, 目前 router.back 目前只能返回上一个页面/首页, 建议考虑增加一个返回前N(N>1)个页面的功能或者router对象上可以提供获取堆栈上所有页面path列表, 便于开发实现业务功能。

HarmonyOS
2024-09-29 13:33:46
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO
1

在许多前端路由系统中,返回多个页面是一个常见的需求,但并非所有路由系统都内置了这个功能。如果你正在使用的是 OHOS 的路由系统,并且 ​​router.back​​ 只能返回上一个页面或首页,那么我们需要一些自定义的方法来实现返回前 N 个页面的功能。

### 解决方案1:手动维护页面堆栈

一种方法是手动维护一个页面堆栈,这样你就可以控制页面历史并根据需要跳转到特定的页面。

以下是一个示例代码,用于手动维护页面堆栈并实现返回前 N 个页面的功能:

// 假设我们有一个全局变量来维护页面堆栈
let pageStack = [];

// 在每次页面跳转时,将路径添加到堆栈中
function pushPage(path) {
    pageStack.push(path);
    router.push({ uri: path });
}

// 返回前 N 个页面
function backTo(n) {
    if (n <= 0 || n >= pageStack.length) {
        console.error("Invalid number of steps.");
        return;
    }

    // 获取目标页面的路径
    const targetPath = pageStack[pageStack.length - 1 - n];

    // 移除堆栈顶部的 N 个页面
    pageStack = pageStack.slice(0, -n);

    // 跳转到目标页面
    router.replace({ uri: targetPath });
}

// 示例用法
pushPage('/page1');
pushPage('/page2');
pushPage('/page3');

// 返回前两个页面(即回到 '/page1')
backTo(2);

### 解决方案2:使用本地存储记录页面路径

另一种方法是将页面路径记录在本地存储中,以便在应用程序重新启动时仍可访问这些信息。

以下是一个示例代码,展示了如何在本地存储中记录页面路径,并实现返回前 N 个页面的功能:

const PAGE_STACK_KEY = 'PAGE_STACK';

// 将页面路径推入本地存储中的堆栈
function pushPage(path) {
    let pageStack = JSON.parse(localStorage.getItem(PAGE_STACK_KEY)) || [];
    pageStack.push(path);
    localStorage.setItem(PAGE_STACK_KEY, JSON.stringify(pageStack));
    router.push({ uri: path });
}

// 从本地存储中获取页面堆栈
function getPageStack() {
    return JSON.parse(localStorage.getItem(PAGE_STACK_KEY)) || [];
}

// 返回前 N 个页面
function backTo(n) {
    let pageStack = getPageStack();
    if (n <= 0 || n >= pageStack.length) {
        console.error("Invalid number of steps.");
        return;
    }

    // 获取目标页面的路径
    const targetPath = pageStack[pageStack.length - 1 - n];

    // 移除堆栈顶部的 N 个页面并更新本地存储
    pageStack = pageStack.slice(0, -n);
    localStorage.setItem(PAGE_STACK_KEY, JSON.stringify(pageStack));

    // 跳转到目标页面
    router.replace({ uri: targetPath });
}

// 示例用法
pushPage('/page1');
pushPage('/page2');
pushPage('/page3');

// 返回前两个页面(即回到 '/page1')
backTo(2);

这两种方法都可以实现返回多个页面的功能。选择哪种方法取决于你的具体需求以及项目结构。

希望以上解决方案对你有帮助!如果有进一步的问题或其他需求,欢迎随时提问。

分享
微博
QQ
微信
回复
2024-09-29 13:55:13
superinsect

可以使用router.back(Options?:RouterOptions)方法,指定参数RouterOptions中的url,将该url设置为希望退回到的指定页面即可。例如:

router.back({  
  url: 'pages/Index'  
})

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5

也可以通过:router.getLength 来 获取当前在页面栈内的页面数量参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5#routergetlength

分享
微博
QQ
微信
回复
2024-09-29 15:50:12
相关问题
返回页面router.back如何传递参数
905浏览 • 2回复 待解决
使用terminateSelf如何退回到一个页面
1895浏览 • 1回复 待解决
怎么返回上一个ets 文件?
132浏览 • 1回复 待解决
router.back如何携带参数返回给上
1434浏览 • 1回复 待解决
HarmonyOS 如何返回一个颜色?
220浏览 • 1回复 待解决
编写一个页面,实现不规则列表
733浏览 • 1回复 待解决
编译一个页面,实现选座场景
678浏览 • 1回复 待解决
一个页面怎么实现多个AbilitySlice?
14275浏览 • 5回复 待解决
编写一个页面,实现吸顶效果
1032浏览 • 1回复 待解决