使用导航栏组件写出vue代码

根据您的需求，以下是使用 Vue.js 实现带有底部导航栏和四个路由组件的示例代码： ### 安装依赖 首先确保安装了 `vue-router`： ```bash npm install vue-router ``` ### 项目结构 ``` src/ ├── components/ │ ├── Home.vue │ ├── Category.vue │ ├── Cart.vue │ └── Login.vue ├── App.vue └── main.js ``` ### 组件文件 #### `Home.vue` ```vue <template> <div class="home"> <h1>首页</h1> <p>欢迎来到首页！</p> </div> </template> <script> export default { name: 'Home' } </script> ``` #### `Category.vue` ```vue <template> <div class="category"> <h1>分类</h1> <p>这里是分类页面。</p> </div> </template> <script> export default { name: 'Category' } </script> ``` #### `Cart.vue` ```vue <template> <div class="cart"> <h1>购物车</h1> <p>这里是购物车页面。</p> </div> </template> <script> export default { name: 'Cart' } </script> ``` #### `Login.vue` ```vue <template> <div class="login"> <h1>登录</h1> <p>这里是登录页面。</p> </div> </template> <script> export default { name: 'Login' } </script> ``` ### 路由配置 #### `main.js` ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` #### `router/index.js` ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../components/Home.vue'; import Category from '../components/Category.vue'; import Cart from '../components/Cart.vue'; import Login from '../components/Login.vue'; const routes = [ { path: '/', component: Home }, { path: '/category', component: Category }, { path: '/cart', component: Cart }, { path: '/login', component: Login } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` ### 主应用文件 #### `App.vue` ```vue <template> <div id="app"> <router-view></router-view> <nav class="bottom-nav"> <router-link to="/">首页</router-link> <router-link to="/category">分类</router-link> <router-link to="/cart">购物车</router-link> <router-link to="/login">登录</router-link> </nav> </div> </template> <script> export default { name: 'App' } </script> <style scoped> .bottom-nav { display: flex; justify-content: space-around; padding: 10px; background-color: #f8f9fa; position: fixed; bottom: 0; width: 100%; } .bottom-nav a { text-decoration: none; color: #343a40; } .bottom-nav a.router-link-exact-active { color: #007bff; } </style> ``` 以上代码实现了一个带有底部导航栏的 Vue 应用，点击导航栏中的链接时，会在导航栏上方切换对应的路由组件。希望这能帮助到您！