vue 动态加载 router 配置（vue动态加载数据）

我想将 vue 的路由部分动态加载，并且这个动态的配置保存在服务器上，这样可以灵活的根据不同的需求进行更改。 查了些资料，大致做法如下：

setTimeout(()=>{
// 在某个时机，从服务器获取动态路由配置
    //dynamicRoutes 数据无法在服务器和客户端之间使用rest api传输
const dynamicRoutes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      requiresAuth: true,
      requiresAdmin: true
    }
  }
];

// 动态添加路由
    for(let route in dynamicRoutes)
router.addRoute(route);
    }, 30*1000);//模拟异步，30秒后运行

但上面的代码有个问题，component 必须要已经 import 了才行，这样就没办法通过服务器传递给客户端配置来进行了。 于是就进行了下面的修改:

setTimeout(()=>{
// 在某个时机，从服务器获取动态路由配置
    //dynamicRoutes 数据可以在服务器和客户端之间使用rest api传输
const dynamicRoutes = JSON.parse(JSON.stringify([
  {
    path: '/dashboard',
    component: './components/dashboard.vue', //这里要使用相对路径
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/profile',
    component: "./components/profile.vue",
    meta: {
      requiresAuth: true,
      requiresAdmin: true
    }
  }
]));

// 动态添加路由
    for(let route in dynamicRoutes) {
        router.addRoute({
          path: route.path,
          component: ()=> import(`${route.component}`),
          meta: route.meta
      });
        }
    }, 30*1000);//模拟异步，30秒后运行

在 component 部分，使用相对路径则可以，如果使用 @开头的路径，则不可以。虽然不完美，至少解决了些问题。

这样做的结果是将关键的组件稍稍隐藏一下，当用户侧没有某个权限的时候，则某个组件完全不加载，完全看不到。