vue实现侧导航
Vue 实现侧边导航的方法
使用 Element UI 的 el-menu 组件
安装 Element UI：
npm install element-ui在 main.js 中引入：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)在组件中使用：
<el-menu
default-active="1"
class="el-menu-vertical"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>导航二</span>
</el-menu-item>
</el-menu>自定义侧边导航组件
创建 Sidebar.vue 组件：
<template>
<div class="sidebar">
<div
v-for="item in menuItems"
:key="item.path"
class="menu-item"
:class="{ active: currentPath === item.path }"
@click="navigateTo(item.path)">
{{ item.title }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPath: '/',
menuItems: [
{ title: '首页', path: '/' },
{ title: '产品', path: '/products' },
{ title: '关于', path: '/about' }
]
}
},
methods: {
navigateTo(path) {
this.$router.push(path)
this.currentPath = path
}
}
}
</script>
<style>
.sidebar {
width: 200px;
background: #2c3e50;
height: 100vh;
color: white;
}
.menu-item {
padding: 15px;
cursor: pointer;
}
.menu-item:hover {
background: #34495e;
}
.menu-item.active {
background: #42b983;
}
</style>使用 Vue Router 实现导航联动
配置路由：
const routes = [
{ path: '/', component: Home },
{ path: '/products', component: Products },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})在 Sidebar 组件中监听路由变化：
watch: {
'$route'(to) {
this.currentPath = to.path
}
}响应式侧边导航实现
添加响应式逻辑：
data() {
return {
isCollapsed: false
}
},
methods: {
toggleCollapse() {
this.isCollapsed = !this.isCollapsed
}
}样式调整：
.sidebar {
transition: width 0.3s;
width: 200px;
}
.sidebar.collapsed {
width: 64px;
}嵌套路由侧边导航
配置嵌套路由：
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{ path: 'overview', component: Overview },
{ path: 'settings', component: Settings }
]
}
]导航组件调整：
<el-menu-item index="/dashboard/overview">概览</el-menu-item>
<el-menu-item index="/dashboard/settings">设置</el-menu-item>
