添加了tabBar之后就不能使用wx.navigateTo跳转页面了吗

我在app.json中添加了增加底部选项卡的代码如下：

{
  "pages":[
    "pages/index/mjkf",
    "pages/goodsDetail/detail"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#333",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"#FFFFFF",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "backgroundColor": "#333333",
    "color": "#FFFFFF",
    "selectedColor": "#32c1d4",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/mjkf",
        "text": "首页",
        "selectedIconPath": "pages/assets/imgs/redbag.png",
        "iconPath": "pages/assets/imgs/redbag.png"
      }, 
      {
        "pagePath": "pages/goodsDetail/detail",
        "text": "商品详情",
        "selectedIconPath": "pages/assets/imgs/redbag2.png",
        "iconPath": "pages/assets/imgs/redbag2.png"
      }
    ]
  }
}

选项卡确实是出来了，但是，当我在js中调用wx.navigateTo时页面却无法跳转了，这是为什么呢？

wx.navigateTo({
          url: '../goodsDetail/detail?id='+data.id,
          success: function(res){
            // success
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })

注：这个跳转页面的逻辑在添加tabBar之前还是没问题的，可以正常跳转