vue3下H5项目实现一个怎么实现tabbar【详细步骤】

1. vue 安装

npm create vue

注意：需要安装路由 vue-router
2. 定义主要页面
比如：

import Home from '../page/Home.vue'
import Discover from '../page/Discover.vue'
import Cate from '../page/Cate.vue'
import Me  from '../page/Me.vue'

const routes = [
    { path: '/home', component: Home },
    { path: '/cate', component: Cate },
    { path: '/discover', component: Discover },
    { path: '/me', component: Me },
]

结构如下

3. 定义一个tabbar 组件

<script setup>
import { useRoute } from 'vue-router'
// 当前路由
const route = useRoute()

const props = defineProps({
  path: {
    type: String,
    required: true,
    default: ''
  },
});

console.log(props.path);


const isActive = (path)=>{
  if (route.path === "/"){
    return "/home".indexOf(path) !== -1;
  }
  return route.path.indexOf(path) !== -1;
}
</script>

<template>
  <div id="tab-bar">
    <div class="tab-bar-item" :class="{active:isActive('/home')}">
      <RouterLink to="/home">
      <img src="@/assets/img/tabbar/home.svg" alt="...">
      <div class="item-text">首页</div>
      </RouterLink>
    </div>

    <div class="tab-bar-item" :class="{active:isActive('/cate')}">
      <RouterLink to="/cate">
      <img src="@/assets/img/tabbar/home.svg" alt="...">
      <div class="item-text" >分类</div>
      </RouterLink>
    </div>


    <div class="tab-bar-item" :class="{active:isActive('/discover')}">
      <RouterLink to="/discover">
      <img src="@/assets/img/tabbar/home.svg" alt="...">
      <div class="item-text">发现</div>
      </RouterLink>
    </div>


    <div class="tab-bar-item" :class="{active:isActive('/me')}">
      <RouterLink to="/me">
      <img src="@/assets/img/tabbar/home.svg" alt="...">
      <div class="item-text">我的</div>
      </RouterLink>
    </div>

  </div>
</template>

<style scoped>
#tab-bar{
  /* 流体布局，使得这个元素占据一行 */
  display: flex;
  height: 49px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f6f6f6;
  font-size: 14px;

  box-shadow: 0 -3px 1px rgba(100,100,100,.08);
}
.tab-bar-item.active .item-text{
  color: red;
}
.tab-bar-item{
  /* 使得这些元素均等分布在流体元素中 */
  flex: 1;
  text-align: center;
}
.tab-bar-item img{
  width: 24px;
  height: 24px;
  /* 使得图片下面不要离文字太远 */
  /* middle： 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐 */
  vertical-align: middle;
}
</style>

4. 在app.vue 中引入tabbar

<script setup>
import Tabbar from "@/components/Tabbar/Index.vue";
</script>
<template>
  <RouterView />
  <Tabbar></Tabbar>
</template>
<style scoped>
</style>

把本人的练习代码 有需要的自己看下
https://gitee.com/yu_yang_technology/htmlexercise