vue实现动态路由添加（简单无废话第二种方法）

// 假设有一个从服务器获取的路由配置数组
const dynamicRoutes = [
  { path: '/page1', component: Page1Component },
  { path: '/page2', component: Page2Component }
  // ...更多路由配置
];
 
// 使用Vue Router添加动态路由
function addDynamicRoutes(router, routes) {
  routes.forEach(routeConfig => {
    const { path, component } = routeConfig;
    const route = { path, component: () => import(`@/components/${component}.vue`) };
    router.addRoute(route);
  });
}
 
// 假设Vue Router实例已经创建
const router = new VueRouter({
  routes: [
    // 静态路由配置
  ]
});
 
// 调用函数添加动态路由
addDynamicRoutes(router, dynamicRoutes);

这个代码示例展示了如何将从服务器获取的路由配置动态添加到Vue Router实例中。addDynamicRoutes函数接受一个Vue Router实例和一个路由配置数组作为参数，然后遍历数组，将每个配置转换为Vue Router需要的格式，并使用addRoute方法添加到路由实例中。这样，你就可以在应用程序启动时根据需要动态地添加路由。