uni-app 面跳转navigator

页面跳转

该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册

举个例子:

<navigator 
url="/pages/test/index" 
hover-class="h" 
open-type="navigate">
这是链接
</navigator>

open-type:
1、navigate (默认值,对应 uni.navigateTo 的功能)
2、redirect (对应 uni.redirectTo 的功能)
3、switchTab (对应 uni.switchTab 的功能)
4、reLaunch (对应 uni.reLaunch 的功能)
5、navigateBack (对应 uni.navigateBack 的功能)
6、exit (退出小程序,target="miniProgram"时生效)

url有长度限制,太长的字符串会传递失败,可使用窗体通信、全局变量,或encodeURIComponent等多种方式解决,如下为encodeURIComponent示例。

<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

页面接参数时

// navigate.vue页面接受参数
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

跳转tabbar页面,必须设置open-type="switchTab"
navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子节点背景色应为透明色

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值