Vue导航栏封装

菜单导航栏

1.TabBarItem.vue

<template>
  <div class="tab-bar-item" @click="itemClick">
    <div :class="{ active: isActivate }"><slot name="item-text"></slot></div>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  name: "TabBarItem",
  props: {
    path: String,
  },
  data() {
    return {};
  },
  computed: {
    isActivate() {
      return this.$route.path.indexOf(this.path) !== -1;
    },
  },
  methods: {
    itemClick() {
      this.$router.replace(this.path);
    },
  },
};
</script>
<style scope>
.tab-bar-item {
  /* flex: 1; */
  line-height: 32px;
  height: 32px;
  font-size: 16px;
  margin-left: 40px;
  width: 100px;
  padding-top: 14px;
  padding-bottom: 14px;
  text-align: center;
}
.tab-bar-item :hover {
  /* color: #0780ed; */
  cursor: pointer;
}
.active {
  color: #fff !important;
  background-color: #0780ed;
  border-radius: 16px;
}
</style>

2.TabBar.vue

<template>
  <div id="tab-bar">
    <slot></slot>
  </div>
</template>

<style scope>
#tab-bar {
  display: flex;
  background-color: #eff7ff;
  margin-bottom: 20px;
}
</style>

3.MainTabBar.vue

<template>
  <div>
    <tab-bar>
      <tab-bar-item path="/intelligent">
        <div slot="item-text">智能配伍</div>
      </tab-bar-item>
      <tab-bar-item path="/warehouseinfo" style="width: 130px">
        <div slot="item-text">库存信息管理</div>
      </tab-bar-item>
      <tab-bar-item path="/market">
        <div slot="item-text">市场管理</div>
      </tab-bar-item>
      <tab-bar-item path="/pricemanage">
        <div slot="item-text">价格管理</div>
      </tab-bar-item>
      <tab-bar-item path="/manageContent" style="width: 110px">
        <div slot="item-text">相容性管理</div>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>
<script>
/* eslint-disable */
import TabBar from "./tabbar/TabBar.vue";
import TabBarItem from "./tabbar/TabBarItem.vue";
export default {
  name: "MainTabBar",
  components: {
    TabBar,
    TabBarItem,
  },
};
</script>

4.index.js路由配置

const ManageContent = () => import('../views/compatibilityManage/ManageContent.vue')
const Intelligent = () => import('../views/intelligentCompatibility/Intelligent.vue')
const Market = () => import('../views/marketManagement/Market.vue')
const PriceManage = () => import('../views/priceManage/PriceManage.vue')
const WarehouseInfo = () => import('../views/warehouseInformation/WarehouseInfo.vue')
const DetailsPage = () => import('../views/compatibilityManage/DetailsPage.vue')

const routes = [
  {
    path:'',
    redirect:'/manageContent'
  },
  {
    path:'/manageContent',
    component:ManageContent,
    children:[
      {
        path:'/detailsPage',
        component:DetailsPage
      }
    ]
  },
  {
    path:'/intelligent',
    component:Intelligent
  },
  {
    path:'/market',
    component:Market
  },
  {
    path:'/pricemanage',
    component:PriceManage
  },
  {
    path:'/warehouseinfo',
    component:WarehouseInfo
  },
]

5.App.vue

<template>
  <div id="app">
    <main-tab-bar></main-tab-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import MainTabBar from "./components/MainTabBar.vue";
export default {
  name: "App",
  components: {
    MainTabBar,
  },
};
</script>