uniapp添加底部导航栏实现页面跳转

要在uni-app中添加底部导航栏并实现页面跳转，你可以按照以下步骤进行操作：

1. 在 `pages` 目录下创建需要显示在航栏中的页面，比如 `home.vue`、 `discover.vue`、 `mine.vue` 等。

2. 在 `App.vue` 文件中，使用 `uni-tabbar` 组件来创建底部导航栏。示例代码如下：

<template>
  <div>
    <uni-tab-bar :active="active" @click="tabClick">
      <uni-tab-bar-item icon="home" text="首页" index="home"></uni-tab-bar-item>
      <uni-tab-bar-item icon="discover" text="发现" index="discover"></uni-tab-bar-item>
      <uni-tab-bar-item icon="mine" text="我的" index="mine"></uni-tab-bar-item>
    </uni-tab-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 'home'
    };
  },
  methods: {
    tabClick(e) {
      this.active = e.index;
      uni.switchTab({
        url: '/pages/' + e.index + '.vue'
      });
    }
  }
}
</script>

3. 在 `tab-bar-item` 组件中，通过 `icon` 属性指定图标，`text` 属性指定文本，`index` 属性指定对应的页面文件名。

4. 在 `tabClick` 方法中，使用 `uni.switchTab` 方法实现页面跳转。这里使用 `switchTab` 而不是 `navigateTo` 或者 `redirectTo` 是因为底部导航栏的页面切换需要使用 `switchTab`。

这样就可以在uni-app中实现底部导航栏并实现页面跳转了。记得在 `manifest.json` 文件中配置对应的页面路径。