vue admin template 如何控制导航菜单的显示隐藏
时间: 2023-07-19 16:26:09 浏览: 142
Vue Admin Template 的导航菜单是通过路由配置来控制显示和隐藏的。具体来说,可以在路由配置文件中设置 `meta` 属性来指定当前路由所对应的菜单是否需要显示。例如:
```javascript
{
path: '/dashboard',
component: Dashboard,
name: 'Dashboard',
meta: {
requiresAuth: true, // 是否需要登录才能访问
menu: true, // 是否显示在导航菜单中
iconClass: 'el-icon-s-home' // 菜单图标
}
}
```
在导航菜单组件中,可以通过遍历路由配置文件来动态渲染菜单,并根据 `meta.menu` 属性来判断是否需要显示当前菜单项。例如:
```html
<template>
<div class="sidebar-menu">
<el-menu
:default-active="$route.path"
:collapse="isCollapse"
:unique-opened="true"
router
:collapse-transition="false"
class="el-menu-vertical-demo"
>
<template v-for="item in menuList">
<sidebar-menu-item :item="item" :key="item.path"></sidebar-menu-item>
</template>
</el-menu>
</div>
</template>
<script>
import routes from '@/router/routes'
export default {
name: 'SidebarMenu',
data() {
return {
menuList: []
}
},
created() {
this.menuList = this.filterMenu(routes)
},
methods: {
filterMenu(routes) {
return routes.filter(route => {
if (route.meta && route.meta.menu) {
if (route.children) {
route.children = this.filterMenu(route.children)
}
return true
}
return false
})
}
}
}
</script>
```
在上面的代码中,`filterMenu` 方法会递归遍历路由配置文件,根据 `meta.menu` 属性来筛选出需要显示的菜单项,并将其存储到 `menuList` 中。然后在模板中通过遍历 `menuList` 来动态渲染菜单。
阅读全文