注意事项
- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 调用页面路由带的参数可以在目标页面的onLoad中获取。
navigator 路由标签&跳转传参
- url : 当前小程序内的跳转链接
- open-type : 跳转方式navigate | switchTab | …
传参 : <navigator url="../p/p?code=123">``</navigator>
获取 :
onLoad: function (options) {options.code}
导航式路由跳转&传参
| 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)
注意事项
- 不要尝试修改页面栈,会导致路由以及页面状态错误。
- 不要在 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
}
}
