vue2 el导航菜单 多级
时间: 2023-11-12 19:05:22 浏览: 55
可以使用 vue-router 和递归组件来实现多级导航菜单。首先在路由配置中定义好多级的路由,然后在菜单组件中使用递归组件来渲染出多级菜单。
以下是一个简单的示例代码:
```html
<template>
<div>
<ul>
<li v-for="item in menuList" :key="item.path">
<router-link :to="item.path">{{ item.name }}</router-link>
<!-- 递归调用子菜单 -->
<menu-item v-if="item.children" :menu-list="item.children"></menu-item>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "MenuItem",
props: {
menuList: {
type: Array,
required: true,
},
},
// 递归组件
components: {
MenuItem: {
props: ["menuList"],
template: `
<ul>
<li v-for="item in menuList" :key="item.path">
<router-link :to="item.path">{{ item.name }}</router-link>
<menu-item v-if="item.children" :menu-list="item.children"></menu-item>
</li>
</ul>
`,
},
},
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)