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

open-type跳转方式	对应点击事件	功能区别
navigator		跳转到应用内的某个页面 可返回原页面
redirect
switchTab	wx.switchTab
reLaunch
navigateBack
exit

一、navigator（静态跳转，相当于html中的<a>）

​ 

注意：这种方式，不能跳转到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代码

    urlClick() {

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

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

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

    },