VUE实现后台传递路由配置数据

实现Vue动态路由的一种方式是通过后台传递路由配置数据，然后前端根据这些数据生成对应的路由表并动态添加到Vue的路由器中。下面是一个简单的示例：

首先，在后台配置好路由表，例如：

{
  "routes": [
    {
      "path": "/",
      "name": "Home",
      "component": "Home"
    },
    {
      "path": "/about",
      "name": "About",
      "component": "About"
    },
    {
      "path": "/contact",
      "name": "Contact",
      "component": "Contact"
    }
  ]
}

然后，在前端请求接口获取到路由配置数据后，可以使用vue-router的addRoutes方法动态添加路由。假设后台返回的路由配置数据存储在response.data.routes中，可以按照以下方式生成路由表：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 创建一个空的路由器实例
const router = new VueRouter({
  mode: 'history',
  routes: []
});

// 根据后台返回的路由配置数据生成路由表
const dynamicRoutes = response.data.routes.map(route => {
  return {
    path: route.path,
    name: route.name,
    component: () => import(`@/views/${route.component}.vue`)
  };
});

// 使用addRoutes方法将动态路由添加到路由器中
router.addRoutes(dynamicRoutes);

export default router;

上述代码中，通过import()方法实现按需加载组件，这里假设组件文件存储在src/views目录下。

最后，将生成的动态路由表添加到Vue的路由器中，即可实现动态路由的功能。

在生成的路由表中，每个路由都包含了path、name和component等属性。后台进行配置，并在前端根据这些属性进行路由的生成和匹配。