open-type跳转方式

对应点击事件

功能区别

navigator

 


跳转到应用内的某个页面

可返回原页面


redirect

switchTab

wx.switchTab

reLaunch

navigateBack

exit

一、navigator(静态跳转,相当于html中的

【小程序】微信小程序中的navigator链接和路由跳转(图文+代码)_微信小程序 

注意:这种方式,不能跳转到tabbar页面(底部菜单导航)

<view>
【默认】:不能跳转到tabbar页面(底部菜单导航)
</view>
<view style="height: 30px;"></view>
<view>
<navigator url="/pages/my/my" style="background-color: rgb(193, 252, 252);height: 40px;width: 200px;text-align: center;line-height: 40px;">
不能跳转到“我的”>
</navigator>
</view>
<view style="height: 30px;"></view>


<view>
【switchTab】:可跳转tabbar页面(底部菜单导航)
</view>
<view style="height: 30px;"></view>

<view>
<navigator url="/pages/my/my" open-type="switchTab" style="background-color: rgb(193, 252, 252);height: 40px;width: 200px;text-align: center;line-height: 40px;">
可跳转到“我的”>
</navigator>
</view>
<view style="height: 30px;"></view>


<view>
用【点击事件】实现跳转
</view>
<view style="height: 30px;"></view>

<view>
<button type="primary" bindtap="urlClick">
点击事件跳转到【我的】
</button>
</view>

二、index.json代码

【小程序】微信小程序中的navigator链接和路由跳转(图文+代码)_底部菜单_02

 

urlClick() {

// ========= 不可跳转到tabbar页面(底部菜单导航)
wx.navigateTo({
url:"/pages/my/my"
})

// ========= 可跳转到tabbar页面(底部菜单导航)
wx.switchTab({
url:"/pages/my/my"
})

// ========= 可传参数:可跳转到tabbar页面(底部菜单导航)
wx.reLaunch({
url:"/pages/my/my?id=888"
})

},