使用element-ui写一个导航菜单,只有一级导航,导航菜单分为4个模块,用户模块,分类模块,套餐模块,电影模块,并且配置好导航路由
时间: 2024-05-07 20:22:02 浏览: 147
element-ui省市县三级联动菜单代码.zip
可以使用element-ui的el-menu组件来实现一个导航菜单,代码如下:
```html
<template>
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @select="handleSelect">
<el-menu-item index="/users">用户模块</el-menu-item>
<el-menu-item index="/categories">分类模块</el-menu-item>
<el-menu-item index="/packages">套餐模块</el-menu-item>
<el-menu-item index="/movies">电影模块</el-menu-item>
</el-menu>
</template>
<script>
export default {
methods: {
handleSelect(key, keyPath) {
this.$router.push(key)
}
}
}
</script>
```
这里使用了el-menu组件,设置了默认激活项为当前路由路径,然后在每个el-menu-item中设置了对应的路由路径(index属性)。当点击某个菜单项时,会触发handleSelect方法,该方法会使用$router.push方法来实现路由跳转。
阅读全文