【vuejs】vue-router 之 addRoute 动态路由的应用总结

// 引入vue-router
import VueRouter from 'vue-router';
 
// 创建Vue应用实例
const app = createApp(App);
 
// 确保使用 Vue.use 安装路由
app.use(VueRouter);
 
// 创建路由实例
const router = new VueRouter({
  // 路由配置
});
 
// 动态添加路由的函数
function addDynamicRoutes() {
  // 假设从服务器获取路由数据
  const routesData = [
    { path: '/path1', component: Path1Component },
    { path: '/path2', component: Path2Component },
    // 更多路由数据...
  ];
 
  // 遍历路由数据，动态添加到路由实例中
  routesData.forEach(routeData => {
    router.addRoute(routeData);
  });
}
 
// 在适当的时机调用函数添加动态路由
addDynamicRoutes();
 
// 将路由实例挂载到应用实例
app.use(router);
 
// 最后挂载App实例到DOM
app.mount('#app');

这个代码示例展示了如何在Vue应用中使用addRoute方法动态添加路由。首先创建Vue应用实例和VueRouter实例，然后定义一个函数来获取动态路由数据，并通过遍历这些数据来添加到路由实例中。最后，在合适的时机调用这个函数，并将VueRouter实例挂载到Vue应用上。