vue自定义移动端底部导航栏

三个步骤
1.在components中内写好第一部分代码
2.新建四个文件用于底部的切换跳转即可

3.在router配置路径的跳转

一：自定义底部导航条

在components中tabbar组件代码如下，
图片路径换成自己的，可以自己添加底部数量

<template>
  <div>
    <div id="tab-bar">
      <div class="tab-bar-item" @click="homeClick()">
        <img v-if="!ishome" src="../../assets/img/tabbar/home.svg" alt="" />
        <img v-else src="../../assets/img/tabbar/home_active.svg" alt="" />
        <div :class="{ active: ishome }">首页</div>
      </div>
      <div class="tab-bar-item" @click="categoryClick()">
        <img
          path="./category"
          v-if="!isActive"
          src="../../assets/img/tabbar/category.svg"
          alt=""
        />
        <img v-else src="../../assets/img/tabbar/category_active.svg" alt="" />
        <div :class="{ active: isActive }">分类</div>
      </div>
      <div class="tab-bar-item" @click="shopcartClick()">
        <img
          v-if="!iscart"
          src="../../assets/img/tabbar/shopcart.svg"
          alt=""
        />
        <img v-else src="../../assets/img/tabbar/shopcart_active.svg" alt="" />
        <div :class="{ active: iscart }">购物车</div>
      </div>
      <div class="tab-bar-item" @click="profileClick()">
        <img
          v-if="!isprofile"
          src="../../assets/img/tabbar/profile.svg"
          alt=""
        />
        <img v-else src="../../assets/img/tabbar/profile_active.svg" alt="" />
        <div :class="{ active: isprofile }">我的</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed:{
      isActive(){
          return this.$route.path=="/category"
      },
      ishome(){
           return this.$route.path==("/")
      },
      iscart(){
          return this.$route.path==("/cart")
      },
      isprofile(){
           return this.$route.path==("/profile")
      }
  },
  methods: {
    categoryClick() {
      if (this.$route.path !== "/category") {
        this.$router.replace("/category");
      }
    },
    homeClick() {
      if (this.$route.path !== "/") {
        this.$router.replace("/");
      }
    },
    shopcartClick() {
      if (this.$route.path !== "/cart") {
        this.$router.replace("/cart");
      }
    },
    profileClick() {
      if (this.$route.path !== "/profile") {
        this.$router.replace("/profile");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#tab-bar {
  display: flex;
  background-color: #f6f6f6;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px -1px 1px rgba(100, 100, 100, 0.2);
}
.tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;
  font-size: 14px;
}
.tab-bar-item img {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  vertical-align: middle;
  margin-bottom: 2px;
}
.active {
  color: rgb(243, 74, 102);
}
</style>

路由router配置

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home/Home.vue')
  },
  {
    path: '/category',
    name: 'Category',
    component: () => import('../views/category/Category.vue')
  }, {
    path: '/cart',
    name: 'Cart',
    component: () => import('../views/cart/Cart.vue')
  }, {
    path: '/profile',
    name: 'Profile',
    component: () => import('../views/profile/Profile.vue')
  },
] 

const router = new VueRouter({
  routes
})

export default router

这样就完成了底部的封装

二、自定义顶部导航条

顶部headerTop组件如下：

<template>
  <div class="nav_bar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div>
  </div>
</template>

<script>
export default {
  name: "Tabbar",
};
</script>

<style scoped>
.nav_bar {
  display: flex;
  line-height: 44px;
  text-align: center;
  height: 44px;
  box-shadow: 0 1px 1px rgba(100, 100, 100, .1);
}
.left,
.right {
  width: 60px;
}
.center {
  flex: 1;
}
</style>

组件中的使用

<template>
  <div>
    <header-bar class="home-nav">
      <div slot="center">搭配贴士</div>
    </header-bar>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "../../components/TabBar/TabBar.vue";
import HeaderBar from "../../components/Header/Header.vue";
export default {
  components: {
    Tabbar,
    HeaderBar,
  },
};
</script>

<style scoped>
  .home-nav{
    background-color: var(--color-tint);
  }
</style>