【HarmonyOS NEXT】router.pushNamedRoute子模块与主模块跳转无法同时兼容

【关键字】

router.pushNamedRoute / router.pushUrl / HSP

【问题描述】

通过router.pushNamedRoute在主工程页面跳转到其他模块后,其他模块的页面使用router.pushUrl跳转方法失效,存在子模块与主模块跳转无法同时兼容的问题。

直接启动Testapplication子模块可以跳转,pushUrl方法正常,从主入口通过以下方式进入,pushUrl跳转无效。

具体示例代码如下:

主模块Index页面代码:
import ('@BOB/Testapplication/src/main/ets/pages/album')
import router from '@ohos.router';
//执行该方法跳转到子模块'album'页面
router.pushNamedRoute({
name: 'album', //入口名称
})


Testapplication子模块album页面代码:
import router from '@ohos.router';

@Entry ({ routeName : 'album' })
@Component
struct ablum {
@State message: string = 'Hi album'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button("pushUrl跳转albumFirst",{ type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.width(150)
.height(60)
.margin(20)
.onClick(()=>{
router.pushUrl({
url: 'pages/albumFirst',
// params: new routerParams(this.pageName ,[])
})//默认模式
})

.width('100%')
// .alignItems(HorizontalAlign.Center)
// .justifyContent(FlexAlign.Start)
}
}
.height('100%')
}

【解决方案】

当跳转的目标页面属于HSP时(包括HSP页面跳HSP页面),需要使用特定写法。

具体参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/in-app-hsp-0000001774119898#ZH-CN_TOPIC_0000001774119898__%E9%A1%B5%E9%9D%A2%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC

也可以使用路由命名的形式实现,@bundle的方面只支持跳转hsp页面,路由命名支持跳转到HAP、HSP、HAR的页面。

在Vue Router中,`router.push()`方法通常用于导航到一个新的命名路由。当你使用`router.pushNamedRoute()`并跳转后,如果你期望能够通过`router.back()`返回上一个页面,这可能会遇到一些挑战。 首先,`router.pushNamedRoute()`直接将用户导航到指定的命名路由,它并不会记录用户的浏览历史。因此,`router.back()`默认的行为是在当前的路由栈中回退,由于并没有保存之前的路径,所以无法回到之前的状态。 其次,如果你想让`router.back()`工作,一种解决方案是手动保存路由信息,比如在组件生命周期钩里,每次导航时都把当前路由添加到一个数组或变量中,然后在需要回退时从这个列表中取出最后一个路由进行跳转。 ```javascript // 示例代码 export default { beforeRouteUpdate(to, from, next) { // 如果不是第一次进入页面 if (to.path !== from.path) { this.history.pushedRoutes.push(to); } next(); }, beforeDestroy() { // 页面销毁前,尝试最后一次回退 if (this.history.pushedRoutes.length > 0) { router.push(this.history.pushedRoutes.pop()); } }, methods: { back() { if (this.history.pushedRoutes.length > 0) { router.push(this.history.pushedRoutes.pop()); } else { router.go(-1); // 或者直接浏览器回退 } }, }, }; ``` 然而,这种方法并不是标准的Vue Router API,而是应用级别的解决方案,并且如果路由管理更复杂,维护起来会变得困难。如果需要频繁地跟踪和回退,可能要考虑使用别的方式来设计用户体验,比如使用状态管理库如Vuex来管理路由状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值