注意事项

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。

    navigator 路由标签&跳转传参

  1. url : 当前小程序内的跳转链接
  2. open-type : 跳转方式navigate | switchTab | …

传参 : <navigator url="../p/p?code=123">``</navigator>
获取 :

  1. onLoad: function (options) {
  2. options.code
  3. }

导航式路由跳转&传参

wx.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch 关闭所有页面,打开到应用内的某个页面
wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不允许跳到 tabbar 页面
wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不允许跳到 tabbar 页面
wx.navigateBack 关闭当前页面,返回上一页面或多级页面
wx.navigateTo({
  url: '../order/balance/balance?model=' + this.data.model
})

获取当前路由(类似router)

getCurrentPages() 获取当前页面栈

注意事项

  • 不要尝试修改页面栈,会导致路由以及页面状态错误。
  • 不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。
  • 必须在跳之前获取,如果在跳之后的组件中获取 那永远是该组件的path ```javascript //在自定义tabbar的onchange中 判断prevRoute决定是否跳转和传参

// 获取当前页面栈 let pages=getCurrentPages(); // 获取上一路由path let prevRoute = pages[pages.length-1].route; //路由参数options: {id: “1138000”} let xx = pages[pages.length-1].options.id;

<a name="RXkva"></a>
## 路由守卫
没有路由守卫,通过getCurrentPages() 获取当前页面栈+判断的方式跳转
<a name="amAsg"></a>
### 自定义tabbar
```html
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#8B0000"
            inactive-color="#666">
  <van-tabbar-item wx:for="{{tabbarArr}}" wx:key="index" icon="{{item.icon}}">{{item.text}}</van-tabbar-item>
</van-tabbar>

custom-tab-bar/index.js -在自定义tabbar中onChange函数是定义tabbar跳转的方法

methods:{
    // 切换tabbar的方法
    onChange(event) {
        console.log(event.detail);// event.detail 的值为当前选中项的索引
        //判断是否要去购物车组件 tabbarArr是定义自定义tabbar数据
        if(this.data.tabbarArr[event.detail].pagePath === '/pages/cart/cart'){
            let token = wx.getStorageSync('token')
            //没有token只能去用户组件
            if(!token){
              wx.switchTab({
                  url: '/pages/user/user',
                })
               return
            }
        }
        //默认跳转到点击的tabbar
        wx.switchTab({
          url: this.data.tabbarArr[event.detail].pagePath,
        })
    },
}

普通页面 | 组件

在该页面跳转前判断(可用全局变量作为判断依据)

案例:在detail页面中, 如果去购物车car页面,需要判断是否登录 没有则去user用户页面 detail.js

//去购物车
goToCar(){
  let token = wx.getStorageSync('token')
  //判断是否登录 没有就去user
  if(!token){
    wx.switchTab({
      url:'/pages/user/user',
    })
    return
  }
}