vue 怎么实现菜单路由来自后台接口的数据

Vue 可以通过使用 axios 或者 fetch 等插件来发送请求，从后台接口获取菜单路由的数据，并将其动态添加到 Vue 的路由配置中。

首先，在 Vue 组件中使用 axios 或者 fetch 发送请求，获取后台接口返回的菜单路由数据。可以在组件的 created 钩子函数中发送请求，并将返回的数据保存在组件的 data 中。

然后，在 Vue 的路由配置中动态添加菜单路由。可以在路由配置文件（一般为 router/index.js）中，引入获取菜单路由数据的组件，然后将组件的菜单路由数据遍历添加到路由的 children 数组中。

示例代码如下：

// 组件中发送请求获取菜单路由的数据
import axios from 'axios';

export default {
  data() {
    return {
      menuRoutes: []  // 菜单路由数据
    };
  },
  created() {
    axios.get('/api/menu')  // 假设后台接口为 /api/menu
      .then(response => {
        this.menuRoutes = response.data;  // 保存获取的菜单路由数据
      })
      .catch(error => {
        console.error('Failed to get menu routes.', error);
      });
  }
}

// 路由配置文件中动态添加菜单路由
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    // 其他静态路由
    {
      path: '/home',
      name: 'Home',
      component: Home,
      children: []  // 动态添加的菜单路由
    },
    // 其他静态路由
  ]
});

// 在动态添加菜单路由的地方导入获取菜单路由数据的组件
const menuRoutes = require('./menuRoutes');

// 遍历菜单路由数据，动态添加到路由的 children 数组中
menuRoutes.forEach(route => {
  router.options.routes[0].children.push(route);
});

export default router;

需要注意的是，在获取菜单路由数据后，需要将其转换为 Vue Router 可用的路由对象格式，包括 path、name、component 等属性。另外，还可以根据需要设置路由的其他属性，如 meta。