微信小程序从入坑到放弃之坑十二：navigator无法跳转的坑

转自：http://www.yilingsj.com/xwzj/2018-11-25/weixin-miniprogram-navigator.html

微信小程序中的页面跳转用navigator就行了，但如果需要跳转的页面路径跟系统底栏tabBar中的相同时，就无法跳转了......

这个navigator本来该放前面说的，不知道怎么回事就写漏掉了，现在补上来。

一、navigator是什么？

微信小程序官方释义为：页面链接。文档地址：
developers.weixin.qq.com/miniprogram/dev/component/navigator.html。此时我们应该知道这东西可以干嘛了，就是类似网页中的a标签的用途。

二、navigator有什么坑？

这一切还要从我们的设计稿说起。在首页的时候，可以看到底栏是一个tabBar，一共是有5个链接的。如图：我们再来看下我的订单页面。如图：可以看到有“查看物流”、“确认收货”两个按钮。由于当时页面不完整，所以就直接让其跳转到了首页，也就是：/pages/index/index页面

按理说，这没毛病对吧。反正navigator是用来做超链接跳转用的，而且这个首页地址也是存在的。但是！神奇的事情出现了！那就是：此时我的订单页面中的这两个链接无法跳转到首页，点击此页面的商品图是可以成功跳转到商品详情页的！

此时出现这种结果，让我很是懵逼！不科学啊，这页面地址明明有的啊，为什么不跳转呢？！

三、当跳转的链接跟tabBar中pagePath的路径相同时无法跳转

一脸懵逼只是从网上搜索，于是后经搜索才得知：当跳转的链接跟tabBar中pagePath的路径相同时无法跳转。

怎么理解呢？我们来看下app.json中的tabBar代码吧。如图：可以看到list数组里的第一个对象的pagePath就是pages/index/index

四、解决方法：open-type=switchTab

在文档中有这样一个属性名-- open-type，释义是：跳转方式。一共有6个值，分别是：
navigate，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabBar 页面。使用 wx.navigateBack 可以返回到原页面。；
redirect，关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabBar 页面。；
switchTab，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；
reLaunch，关闭所有页面，打开到应用内的某个页面；
navigateBack，关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。；
exit，退出小程序，target="miniProgram"时生效；
一堆描述，其实我也不知道描述的是啥！（想看官方文档的可拉上面找链接。）主要还是因为不能充分理解 tabBar 页面到底是啥！只好按照网上说的方法操作，把订单页面中的那两个按钮都添加上open-type="switchTab"。然后一保存再点击就可以跳转了，开森！

由于当时自己对两个以上按钮都用了component组件进行封装，所以这个坑在别的地方又突显了出来！

五、open-type=switchTab也有坑

需要注意的是：switchTab只能跳转到 tabBar 页面！！！。什么意思呢？拿首页的设计稿来说，底部的tabBar 里面有5个页面的链接，而在使用这个switchTab时，跳转的链接需要是这5个链接里面的才行，不在这5个链接内的继续使用open-type="switchTab"是无法跳转的！

别问我是怎么知道的，因为我掉坑中了！