请使用vue写出代码

好的，以下是一个使用 Vue.js 实现底部导航栏和路由组件的示例代码： ### 安装依赖 首先，确保你已经安装了 Vue CLI 和 Vue Router： ```sh npm install -g @vue/cli npm install vue-router ``` ### 项目结构 假设你的项目结构如下： ``` my-vue-app/ ├── src/ │ ├── components/ │ │ ├── Home.vue │ │ ├── Category.vue │ │ ├── Cart.vue │ │ └── Login.vue │ ├── App.vue │ ├── main.js │ └── router.js └── package.json ``` ### 创建路由组件 在 `src/components` 目录下创建四个组件文件： #### `Home.vue` ```vue <template> <div> <h1>首页</h1> <p>欢迎来到首页！</p> </div> </template> <script> export default { name: 'Home' } </script> ``` #### `Category.vue` ```vue <template> <div> <h1>分类</h1> <p>这里是分类页面。</p> </div> </template> <script> export default { name: 'Category' } </script> ``` #### `Cart.vue` ```vue <template> <div> <h1>购物车</h1> <p>这里是购物车页面。</p> </div> </template> <script> export default { name: 'Cart' } </script> ``` #### `Login.vue` ```vue <template> <div> <h1>登录</h1> <p>这里是登录页面。</p> </div> </template> <script> export default { name: 'Login' } </script> ``` ### 配置路由 在 `src` 目录下创建 `router.js` 文件，并配置路由： ```js import Vue from 'vue'; import VueRouter 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'; Vue.use(VueRouter); const routes = [ { path: '/', component: Home }, { path: '/category', component: Category }, { path: '/cart', component: Cart }, { path: '/login', component: Login } ]; const router = new VueRouter({ mode: 'history', routes }); export default router; ``` ### 主应用文件 编辑 `src/main.js` 文件，引入并使用路由： ```js import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app'); ``` ### 应用主文件 编辑 `src/App.vue` 文件，添加底部导航栏和路由视图： ```vue <template> <div id="app"> <router-view></router-view> <nav class="navbar-bottom"> <router-link to="/" class="nav-item">首页</router-link> <router-link to="/category" class="nav-item">分类</router-link> <router-link to="/cart" class="nav-item">购物车</router-link> <router-link to="/login" class="nav-item">登录</router-link> </nav> </div> </template> <script> export default { name: 'App' }; </script> <style scoped> .navbar-bottom { display: flex; justify-content: space-around; background-color: #f8f9fa; padding: 10px 0; position: fixed; bottom: 0; width: 100%; border-top: 1px solid #dee2e6; } .nav-item { text-decoration: none; color: #007bff; font-size: 16px; } .nav-item.router-link-exact-active { color: #dc3545; } </style> ``` 这样，你就完成了一个带有底部导航栏和路由组件的 Vue 应用。点击底部导航栏的链接时，会在导航栏上方切换对应的路由组件。