vue三级菜单递归拼写路径跳转

可以通过递归组件实现三级菜单的拼接和路径跳转，具体步骤如下： 1. 创建一个组件，命名为Menu，用于展示菜单列表和菜单项的点击事件。 2. 在Menu组件中，定义一个props属性，用于接收传入的菜单数据，例如： ``` props: { menuData: { type: Array, default: () => [] } } ``` 3. 在Menu组件中，使用v-for指令循环渲染菜单项，并绑定点击事件。 ``` <template> <ul> <li v-for="(item, index) in menuData" :key="index" @click="handleClick(item)"> {{ item.name }} <Menu v-if="item.children" :menuData="item.children"></Menu> </li> </ul> </template> ``` 4. 在Menu组件中，定义一个方法handleClick，用于处理菜单项的点击事件。在该方法中，判断当前菜单项是否有子菜单，如果有，递归调用Menu组件，并将子菜单数据传入子组件中。如果没有，拼接菜单路径，并使用vue-router进行路由跳转。 ``` methods: { handleClick(item) { if (item.children) { return } let path = '' let parent = item.parent while (parent) { path = '/' + parent.name + path parent = parent.parent } path = path + '/' + item.name this.$router.push(path) } } ``` 5. 在父组件中，引入Menu组件，并将菜单数据传入组件中即可。 ``` <template> <div> <Menu :menuData="menuData"></Menu> </div> </template> <script> import Menu from './Menu.vue' export default { components: { Menu }, data() { return { menuData: [ { name: '菜单1', children: [ { name: '子菜单1-1', children: [ { name: '子菜单1-1-1' }, { name: '子菜单1-1-2' } ] }, { name: '子菜单1-2' } ] }, { name: '菜单2', children: [ { name: '子菜单2-1' }, { name: '子菜单2-2' } ] } ] } } } </script> ``` 以上就是使用递归组件实现vue三级菜单递归拼写路径跳转的步骤。