首页vue中封装一个侧边导航栏

vue中封装一个侧边导航栏

时间: 2024-12-10 18:38:44 浏览: 62

在Vue.js中，封装一个侧边导航栏通常涉及到组件化的设计思想，可以创建一个名为`SideNav`的自定义组件。以下是基本步骤： 1. 创建组件模板（template）： ```html <template> <div class="side-nav"> <ul> <li v-for="(item, index) in items" :key="index"> <router-link :to="item.path">{{ item.name }}</router-link> </li> </ul> </div> </template> ``` 这里假设`items`是一个包含路径（path）和名称（name）的数据数组。 2. 编写数据和方法（script）： ```javascript <script> export default { name: 'SideNav', props: { // 接收路由配置作为父组件传递 routes: { type: Array, required: true } }, data() { return { currentPath: '' }; }, computed: { items() { return this.routes.filter(item => item.path === this.currentPath); } }, watch: { // 监听路由变化 $route(to) { this.currentPath = to.path; } } }; </script> ``` 在这个组件中，我们定义了接收路由配置的prop，并监听路由变化来更新当前选中的菜单项。 3. 样式（style）（可选，如果需要自定义样式）： ```css <style scoped> .side-nav { /* 根据需求设置侧边栏样式 */ } </style> ``` 使用这个组件时，只需要将` SideNav`添加到父组件并传入路由配置： ```vue <template> <div> <side-nav :routes="routes"></side-nav>  </div> </template> <script> import SideNav from '@/components/SideNav.vue'; export default { components: { SideNav }, data() { return { routes: [ // 配置侧边栏菜单项 { path: '/', name: '首页' }, { path: '/about', name: '关于' }, // 更多... ] }; } }; </script> ```

阅读全文