微信小程序之路由(五)

一、小程序路由分类？

1.Tab 切换 wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面,这个api只能跳转到底部导航设置的几个页面，它是不能跳转到其他单独页面的。

2.打开新页面 wx.navigateTo(Object object)
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

3.页面重定向 wx.redirectTo(Object object)
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

4.重启动 wx.reLaunch(Object object)
关闭所有页面，打开到应用内的某个页面

5.页面返回 wx.navigateBack(Object object)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

<navigator url="/pages/detail/detail" open-type='navigate' style='border:1px solid red;' >进入非tab页</navigator>
<navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator>
<navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator>
<navigator open-type='navigateBack' >回退</navigator>

navigateTo, redirectTo 只能打开非 abBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch可以打开任意页面, 但是没有返回按钮，需要定义一个可以点击回退的按钮。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

二、路由如何传参？

从列表页进入详情页时，需要传递列表被点击项目的 id 至详情页，方法：

在列表页通过data-id='{{item.id}}'给各个项目绑定一个 id ；
在详情页通过 onload 拿到 id;

<view class="list" >
    <view class='box'  wx:for='{{list}}' wx:key='{{index}}' data-id='{{item.id}}' bindtap='goDetail'>
        <image src='{{item.img}}'></image>
        <view class='tip'>
            <text>{{item.title}}</text>
            <text class='price'>￥{{item.price}}</text>
        </view> 
    </view> 
</view>

// 进入详情页时 传递 id
goDetail (e) {
    console.log(e.currentTarget.dataset.id),
    wx.navigateTo({
        url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
    })
},

如果感觉有帮助留下一个宝贵的赞或者给小编一个赞赏！！！