如何通过JSON数据递归获取精确的路由菜单或树形结构？

实现方式：

使用JavaScript的filter方法实现树形结构数据的递归遍历获取

// 定义一个递归函数来获取子树形结构数据
function getChildren(data, parentId) {
  return data.filter(item => item.parentId === parentId);
}

// 定义一个函数来获取整个树形结构数据
function getTree(data) {
  const result = [];
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    if (item.parentId === null) {
      result.push(item);
    } else {
      const children = getChildren(data, item.id);
      item.children = children;
    }
  }
  return result;
}

使用Vue.js框架来处理树形路由菜单的实现

// 定义一个Vue组件来处理树形路由菜单
Vue.component('tree-menu', {
  props: ['data'],
  template: `
    <ul>
      <li v-for="item in data">
        <a :href="item.link">{{ item.name }}</a>
        <tree-menu v-if="item.children" :data="item.children"></tree-menu>
      </li>
    </ul>
  `
});

// 在Vue实例中使用树形路由菜单组件
new Vue({
  el: '#app',
  data() {
    return {
      data: [
        {
          id: 1,
          name: 'Home',
          link: '/home',
          parentId: null
        },
        {
          id: 2,
          name: 'About',
          link: '/about',
          parentId: null
        },
        {
          id: 3,
          name: 'Products',
          link: '/products',
          parentId: null
        },
        {
          id: 4,
          name: 'Product 1',
          link: '/products/1',
          parentId: 3
        },
        {
          id: 5,
          name: 'Product 2',
          link: '/products/2',
          parentId: 3
        },
        {
          id: 6,
          name: 'Services',
          link: '/services',
          parentId: null
        },
        {
          id: 7,
          name: 'Service 1',
          link: '/services/1',
          parentId: 6
        },
        {
          id: 8,
          name: 'Service 2',
          link: '/services/2',
          parentId: 6
        }
      ]
    };
  }
});

使用以上方法，您可以轻松地通过JSON数据递归获取精确的路由菜单或树形结构，并使用Vue.js框架来处理树形路由菜单的实现。