vue3动态添加路由

// Vue 3 动态添加路由示例代码

// 引入必要的模块
import { createRouter, createWebHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';

// 创建初始的路由配置
const routes = [
  {
    path: '/',
    component: defineAsyncComponent(() => import('./components/Home.vue'))
  }
];

// 创建路由器实例
const router = createRouter({
  history: createWebHistory(),
  routes
});

// 动态添加路由的方法
function addRoute(route) {
  // 检查是否已经存在相同的路径
  const existingRoute = router.getRoutes().find(r => r.path === route.path);
  if (!existingRoute) {
    router.addRoute(route);
    console.log(`路由 ${route.path} 已成功添加`);
  } else {
    console.log(`路由 ${route.path} 已存在`);
  }
}

// 示例：动态添加一个新路由
const newRoute = {
  path: '/about',
  component: defineAsyncComponent(() => import('./components/About.vue'))
};

addRoute(newRoute);

export default router;

解释说明：

1. 引入模块：首先引入 vue-router 和 defineAsyncComponent，用于创建路由器和异步加载组件。
2. 初始路由配置：定义初始的路由数组 routes，包含一个默认的根路径 /，指向 Home.vue 组件。
3. 创建路由器实例：使用 createRouter 创建路由器实例，并传入历史模式和初始路由配置。
4. 动态添加路由的方法：定义 addRoute 方法，用于检查并动态添加新的路由。该方法会先检查是否存在相同路径的路由，避免重复添加。
5. 示例调用：在代码中定义一个新的路由 newRoute，并调用 addRoute 方法将其添加到路由器中。

通过这种方式，你可以在应用运行时动态地添加新的路由。