uni-app写了一个tab切换,怎么改切换页面

uni-app写了一个tab切换,怎么改切换页面?就是切换路由页面


<view class="list-category">
            <view class="list-category-item" @click="active = 1" :class="active == 1 ? 'active' : ''">
                关注
            view>
            <view class="list-category-item" @click="active = 0" :class="active == 0 ? 'active' : ''">
                我关注
            view>
        view>
        <view v-if="active == 0">
            1111111111111
        view>
        <view v-if="active == 1">
            2222222222222
        view>

在 uni-app 中切换路由页面可以使用 uni.navigateTo() 或 uni.switchTab() 方法,具体使用哪个方法要看你的场景需求。
如果你是要跳转到一个非 tabBar 页面,可以使用 uni.navigateTo() 方法.

如果你是要跳转到一个 tabBar 页面,可以使用 uni.switchTab() 方法

<view class="list-category-item" @click="switchPage(1)" :class="active == 1 ? 'active' : ''">
  关注
</view>
<view class="list-category-item" @click="switchPage(0)" :class="active == 0 ? 'active' : ''">
  我关注
</view>

methods: {
  switchPage(active) {
    if (active === 0) {
      uni.navigateTo({
        url: '/pages/myPage/myPage'
      })
    } else if (active === 1) {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}

参考这个案例

<template>
  <view class="container">
    <view class="list-category">
      <view
        class="list-category-item"
        @click="switchTab('pages/index/index')"
        :class="activeTab === 0 ? 'active' : ''"
      >
        首页
      </view>
      <view
        class="list-category-item"
        @click="switchTab('pages/cart/cart')"
        :class="activeTab === 1 ? 'active' : ''"
      >
        购物车
      </view>
      <view
        class="list-category-item"
        @click="switchTab('pages/my/my')"
        :class="activeTab === 2 ? 'active' : ''"
      >
        我的
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
    };
  },
  methods: {
    switchTab(path) {
      uni.switchTab({
        url: `/${path}`,
        success: () => {
          this.activeTab = this.getTabBarIndex(path);
        },
      });
    },
    getTabBarIndex(path) {
      const tabBarList = uni.getStorageSync('uni-app-tabBar');
      const index = tabBarList.findIndex((item) => item.pagePath === `/${path}`);
      return index;
    },
  },
};
</script>