小程序中跳转的方式及区别、底部tabbar的配置

index.wxml文件中

<!--index.wxml-->
<view class="container">
<view>
<!-- 
利用js的方式实现跳转
bindtap会事件冒泡
catchtap会阻止事件冒泡
-->
<button bindtap="golog" data-index="123">跳转</button>

<!-- 利用标签的形式进行跳转 -->
<!-- open-type可设置指定的跳转类型 -->
<!--
   跳转非tabbar页面，有历史回退功能
   navigate  ==  wx.navigateTo
   只能打开非tabbar页面，不带历史回退，只能点击左上角的home回到首页
   redirect  ==  wx.redirectTo
   只能打开tabbar页面
   switchTab ==  wx.switchTab
   即可以打开tabbar页面，也可打开非tabbar页面
   reLaunch  ==  wx.reLaunch
   类似于js中的history.go()  历史回退
   navigateBack ==  wx.navigateBack
 -->
<!-- url为要跳转路径 -->
<navigator url="/pages/logs/logs" open-type="switchTab">跳转到log页面</navigator>
</view>
</view>

index.js文件中

//js事件出发后
  golog(e) {
    const { index } = e.currentTarget.dataset
    // wx.navigateTo跳转非tabbar页面,url拼接参数进行传递
    /* wx.navigateTo({
       url: `/pages/logs/logs?id=${index}`,
     })
     */
    
    //wx.switchTab 跳转tabbar页面,url拼接参数进行传递
    /*wx.switchTab({
      url: `/pages/logs/logs?id=${index}`,
    }) 
    */
    console.log('跳转log页面',e)
  },

在app.json文件中进行配置 ，底部tabbar的配置

  "tabBar": {
    "custom": false,
    "list": [
      {
        // 未选中的icon图
        "iconPath": "/images/home.png",
        // 当前选中的icon图
        "selectedIconPath": "/images/home_active.png",
        // 配置页面
        "pagePath": "pages/index/index",
        "text": "首页",
        // 选中时候的文字颜色
        "selectedColor": "#00f"
      },
      {
        "iconPath": "/images/logs.png",
        "pagePath": "pages/logs/logs",
        "text": "详情",
        "selectedColor": "#00f",
        "selectedIconPath": "/images/logs_active.png"
      }
    ]
  }