vue3+TS实现APP底部导航栏TabBar

1.首先要创建文件

下面是我文件的创建路径

vite.config.ts

src\router.ts

src\constants\index.ts

src\components\templates\TabBar.vue

src\components\pages\Home.vue 

src\components\pages\Setting.vue

src\components\pages\Other.vue

图片路径：

src\assets\img\home_current.png
src\assets\img\home.png

src\assets\img\setting_current.png

src\assets\img\setting.png

src\assets\img\other_current.png

src\assets\img\other.png

2.下面一一展示每个文件的内容

• vite.config.ts这个文件在根目录下，文件包含一些文件起别名的方法

  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },

• router.ts

import { createRouter, RouteRecordRaw, createWebHistory } from "vue-router";
import { PAGE_NAME, PAGE_URL } from "@/constants";
import Home from "@/components/pages/Home.vue";
import Setting from "@/components/pages/Setting.vue";
import Other from "@/components/pages/Other.vue";

const routes: Readonly<RouteRecordRaw[]> = [
  {
    path: PAGE_URL.HOME,
    component: Home,
    name: PAGE_NAME.HOME,
    meta: {
      keepAlive: true,
    },
  },
  {
    path: PAGE_URL.SETTING,
    component: Setting,
    name: PAGE_NAME.SETTING,
    meta: {
      keepAlive: true,
    },
  },
  {
    path: PAGE_URL.OTHER,
    component: Other,
    name: PAGE_NAME.OTHER,
    meta: {
      keepAlive: true,
    },
  },
  {
    path: "/:pathMatch(.*)",
    redirect: PAGE_NAME.HOME,
  },
];

const router = createRouter({ history: createWebHistory(), routes });

export { router };

• index.ts

export const PAGE_URL = {
  HOME: "/home",
  SETTING: "/setting",
  OTHER: "/other",
};

export const PAGE_NAME = {
  HOME: "/home",
  SETTING: "/setting",
  OTHER: "/other",
};

• TabBar.vue

<script setup lang="ts">
import { useRouter } from "vue-router";
import { PAGE_URL } from "@/constants";
import home from "@/assets/img/home.png";
import homeCurrent from "@/assets/img/home_current.png";
import setting from "@/assets/img/common/setting.png";
import settingCurrent from "@/assets/img/setting_current.png";
import other from "@/assets/img/other.png";
import otherCurrent from "@/assets/img/other_current.png";

const router = useRouter();

//转换图片和是否添加底部背景色
defineProps({
  homeActive: { type: Boolean, default: false },
  settingActive: { type: Boolean, default: false },
  otherActive: { type: Boolean, default: false },
})

</script>

<template>
  <div class="footer">
    <ul class="footer-list">
      <li
        class="current"
      >
        <!-- 点击跳转，添加背景颜色 -->
        <a
          class="a-link"
          :class="`${homeActive? 'active' : ''}`"
          :disabled="homeActive"
          @click="router.push(PAGE_URL.HOME )"
        >
          <div class="footer-list-img">
            <!-- 转换图片，当前有颜色的和无色的 -->
            <img
              :src="homeActive? homeCurrent : home "
              alt=""
              class="img-url"
            >
          <p>首页</p>
        </a>
      </li>

      <li>
        <a
          class="a-link"
          :class="`${settingActive? 'active' : ''}`"
          :disabled="settingActive"
          @click="router.push( PAGE_URL.SETTING)"
        >
          <div class="footer-list-img">
            <img
              :src="settingActive? settingCurrent : setting "
              alt=""
              class="img-url"
            >
          </div>
          <p>设置</p>
        </a>
      </li>

      <li>
        <a
          class="a-link"
          :class="`${otherActive? 'active' : ''}`"
          :disabled="otherActive"
          @click="router.push( PAGE_URL.OTHER)"
        >
          <div class="footer-list-img">
            <img
              :src="otherActive? otherCurrent : other "
              alt=""
              class="img-url"
            >
          </div>
          <p>其他</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15);
}
.footer-list {
  display: flex;
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-list li {
  flex-basis: calc(100% / 3);
  padding: 4px;
}
.footer-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 7px 0;
  border-radius: 10px;
}
a:hover,
a:visited {
  color: #222;
}
.footer-list-img{
  position: relative;
}
.active{
  background-color: #f3f3f9;
  }
.footer-list-img img {
  transition: all 0.3s ease;
  pointer-events: none;
}
.footer-list p {
  font-size: 11px;
  font-weight: 600;
  margin: 3px 0 0;
  line-height: 1;
  color: #666;
}
</style>

• Home.vue 

<script setup lang="ts">
import TabBar from "@/components/templates/TabBar.vue";
</script>

<template>
  <div>我是首页</div>
  <TabBar :home-active="true" />
</template>

• Setting.vue

<script setup lang="ts">
import TabBar from "@/components/templates/TabBar.vue";
</script>

<template>
  <div>我是设置页</div>
  <TabBar :setting-active="true" />
</template>

• Other.vue

<script setup lang="ts">
import TabBar from "@/components/templates/TabBar.vue";
</script>

<template>
  <div>我是其他</div>
  <TabBar :other-active="true" />
</template>