vue三级菜单递归拼写路径

可以通过递归实现三级菜单的路径拼写，具体实现步骤如下：

1. 定义一个递归函数，传入一个数组参数，该数组包含当前菜单的所有子菜单。

2. 在递归函数中，遍历传入的数组，对于每一个子菜单，将其名称添加到一个路径数组中。

3. 如果该子菜单还有子菜单，那么递归调用该函数，传入该子菜单的子菜单数组，继续拼接路径。

4. 如果该子菜单没有子菜单了，那么将路径数组中的所有元素使用 "/" 拼接起来，就得到了该子菜单的完整路径。

5. 将得到的路径保存到一个对象中，以该子菜单的 ID 为 key，路径为 value。

6. 递归结束后，返回保存所有路径的对象。

示例代码如下：

function generateMenuPaths(menuItems, parentPath = '') {
  const paths = {};
  menuItems.forEach(item => {
    const { id, name, children } = item;
    const path = `${parentPath}/${name}`;
    paths[id] = path;
    if (children && children.length) {
      const childPaths = generateMenuPaths(children, path);
      Object.assign(paths, childPaths);
    }
  });
  return paths;
}

// 假设有以下三级菜单数据
const menuItems = [
  { id: 1, name: '菜单1', children: [
      { id: 11, name: '子菜单1-1', children: [
          { id: 111, name: '子菜单1-1-1' },
          { id: 112, name: '子菜单1-1-2' }
        ]
      },
      { id: 12, name: '子菜单1-2' }
    ]
  },
  { id: 2, name: '菜单2', children: [
      { id: 21, name: '子菜单2-1' },
      { id: 22, name: '子菜单2-2' }
    ]
  }
];

// 调用函数生成菜单路径
const menuPaths = generateMenuPaths(menuItems);

// menuPaths 的值为：
// {
//   "1": "/菜单1",
//   "11": "/菜单1/子菜单1-1",
//   "111": "/菜单1/子菜单1-1/子菜单1-1-1",
//   "112": "/菜单1/子菜单1-1/子菜单1-1-2",
//   "12": "/菜单1/子菜单1-2",
//   "2": "/菜单2",
//   "21": "/菜单2/子菜单2-1",
//   "22": "/菜单2/子菜单2-2"
// }

这样，我们就得到了所有三级菜单的完整路径。可以将路径保存到 Vuex 的 state 中，然后在组件中通过计算属性获取使用。