微信小程序异常：navigateTo:fail can not navigateTo a tabbar page

场景还原

微信小程序利用路径wx.navigateTo跳转界面时发送异常

跳转代码

 showDetail(e){
    // 获取图片绑定的ID编号
    let id = e.currentTarget.dataset.id;
    // 指定编号查询  携带参数到详情界面  
    wx.navigateTo({
      url: '/pages/details/details?id=' + id,
    })
  }
1
2
3
4
5
6
7
8

异常代码

WAServiceMainContext.js:2 Error: 
MiniProgramError {"errMsg":"navigateTo:fail can not navigateTo a tabbar page"}
1
2

原因分析

在app.json中的tabBar关联了details详情界面产生冲突，而官方文档要求wx.navigateTo 无法跳转到 tabBar 中定义的界面，只需要把tabBar换成其他界面就可以！

app.json代码

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/details/details",
        "text": "详情",
        "iconPath" : "images/b_1.png",
        "selectedIconPath" : "images/b_5.png"
      },
     ]
   }
1
2
3
4
5
6
7
8
9
10

核心原因

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

参考文档

微信小程序-API-路径-wx.navigateTo