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三级菜单递归拼写路径跳转的步骤。