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

open-type跳转方式	对应点击事件	功能区别
navigator（默认）	wx.navigateTo	跳转到应用内的某个页面 可返回原页面 但不可跳转到Tab页
	返回上一页 wx.navigateBack({   delta: 2 })
redirect	wx.redirectTo	关闭当前页面，跳转到应用内的某个页面，不能返回原页
switchTab	wx.switchTab	可跳转到tab菜单页
reLaunch	wx.reLaunch({   url: '/pages/index/index', }）	关闭所有页面，打开到应用内的某个页面
navigateBack	wx.navigateBack({   delta: 2 })	返回上一页
exit	target="miniProgram"时生效	退出小程序

一、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"
        })

    },