vue实现底部菜单功能

Vue可以通过使用组件实现底部菜单功能，以下是一个简单的实现方式：

1. 创建一个菜单组件

<template>
  <div class="bottom-menu">
    <router-link :to="item.link" v-for="item in menuItems" :key="item.id">
      <div class="menu-item">
        <i :class="item.icon"></i>
        <span class="menu-text">{{ item.text }}</span>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, text: "首页", icon: "icon-home", link: "/" },
        { id: 2, text: "分类", icon: "icon-category", link: "/category" },
        { id: 3, text: "购物车", icon: "icon-cart", link: "/cart" },
        { id: 4, text: "我的", icon: "icon-user", link: "/user" }
      ]
    };
  }
};
</script>

<style scoped>
.bottom-menu {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.menu-item i {
  font-size: 22px;
  margin-bottom: 3px;
}

.menu-item.active {
  color: #ff6d00;
}
</style>

2. 在页面中引入菜单组件

<template>
  <div class="page">
    <router-view></router-view>
    <bottom-menu></bottom-menu>
  </div>
</template>

<script>
import BottomMenu from "@/components/BottomMenu.vue";

export default {
  components: {
    BottomMenu
  }
};
</script>

通过以上两步，就可以在页面底部显示出一个包含多个菜单项的底部菜单。当用户点击菜单项时，可以通过Vue Router实现页面的跳转。