uniapp跳转到tabbar页面上

1. 什么是uniapp？

uniapp是一款基于Vue.js框架的跨平台应用开发工具，它可以让开发者用一份代码实现多个平台（微信小程序、APP、H5等）的应用开发，同时也支持原生插件的集成。需要注意的是，在APP和微信小程序中使用uniapp的时候，需要对跳转页面的方式进行不同的设置。

2. 如何进行跳转页面？

在uniapp中，跳转页面通常有以下两种方式：

2.1 navigateTo

navigateTo是小程序自带的一个API，用于保留当前页面，跳转到应用内的某个页面，可通过返回按钮返回到原页面。在uniapp中，你可以借助navigateTo来实现页面跳转。

// 在page1.vue中使用navigateTo跳转到page2.vue
uni.navigateTo({
  url: '/pages/page2/page2'
})

需要注意的是，如果页面跳转的层数过多，会占用系统过多的内存资源，造成小程序卡顿。

2.2 switchTab

switchTab是小程序自带的一个API，用于跳转到应用内的某个tab页面，在uniapp中你也可以使用它来进行页面的跳转。需要注意的是，使用switchTab跳转页面时，不会销毁原页面，而是强制性地刷新原页面。

// 在page1.vue中使用switchTab跳转到tabbar页面的第二个页面
uni.switchTab({
   url: '/pages/page2/page2'
})

3. uniapp如何跳转到tabbar页面？

uniapp跳转到tabbar页面其实和小程序是类似的，只需要使用switchTab即可。下面提供一种实现方法：

3.1 在tabbar中使用vuex管理当前选中的tab

为了判断当前需要跳转到哪个tab页面，我们可以在tabbar中使用vuex来管理当前选中的tab，具体实现方法如下：

// store.js
const store = new Vuex.Store({
  state: {
    active: 0
  },
  mutations: {
    setActive(state, index) {
      state.active = index
    }
  },
  actions: {
    setActive({commit}, index) {
      commit('setActive', index)
    }
  }
})
export default store

这时，我们在tabbar中就可以使用vuex中的active来判断当前选中的tab了。

3.2 在非tabbar页面使用switchTab跳转到tabbar页面

我们可以在非tabbar页面通过uni.switchTab跳转到tabbar页面，同时在tabbar的mounted钩子中将active设置为路由参数中的index值。

// non-tabbar页面
uni.switchTab({
  url: '/pages/tabbar/tabbar?index=1'
})
// tabbar页面
mounted() {
  this.$store.dispatch('setActive',this.$mp.query.index)
}

3.3 在tabbar页面中使用active控制选中的tab

在tabbar的页面中我们可以使用active来控制选中的tab。在模板中我们可以使用v-for循环展示tabbar的选项卡，并通过active来对当前选中的选项卡进行标记。

<template>
  <view>
    <navigator
      v-for="(tab, index) in tabList"
      :key="index"
      :url="tab.url"
      class="menu-item"
      :active-class="tab.active ? 'active' : ''"
    >
      <text class="tab-name">{{tab.name}}</text>
    </navigator>
  </view>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'tab-bar',
  computed: {
    ...mapState(['active']),
    tabList() {
      return [
        {
          url: '/pages/home/home',
          name: '首页',
          active: this.active === 0
        },
        {
          url: '/pages/category/category',
          name: '分类',
          active: this.active === 1
        },
        {
          url: '/pages/coupon/coupon',
          name: '优惠券',
          active: this.active === 2
        },
        {
          url: '/pages/member/member',
          name: '会员',
          active: this.active === 3
        }
      ]
    }
  }
}
</script>

4. 总结

以上就是uniapp跳转到tabbar页面的实现方法，借助vuex来记录当前选中的tab，使用switchTab进行页面跳转，使用active来控制选中的tab。希望本文能对大家理解uniapp的页面跳转及如何跳转到tabbar页面有所帮助。