摘要：
微信小程序中的页面跳转用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"是无法跳转的！

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

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2018-11-25/weixin-miniprogram-navigator.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。