vue3实现底部导航栏

以下是使用Vue3实现底部导航栏的示例代码：

1. 在App.vue中引入底部导航栏组件NavBar，并在template中使用该组件：

<template>
  <div>
    <router-view />
    <NavBar />
  </div>
</template>

<script>
import NavBar from "./components/NavBar.vue";

export default {
  name: "App",
  components: {
    NavBar,
  },
};
</script>

2. 创建底部导航栏组件NavBar.vue，并在template中编写底部导航栏的HTML结构和样式：

<template>
  <div class="nav-bar">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/contact">联系我们</router-link>
  </div>
</template>

<style>
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-bar router-link {
  text-decoration: none;
  color: #333;
}
</style>

以上代码演示了如何在Vue3中实现底部导航栏。在App.vue中引入NavBar组件，并在template中使用该组件。NavBar组件中使用了Vue Router的router-link标签来实现导航链接，并设置了底部导航栏的样式。