vue3 addroute

// 使用 Vue Router 在 Vue 3 中动态添加路由

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

// 动态添加新路由
function addRoute(route) {
  router.addRoute(route);
}

// 示例：添加一个名为 Contact 的新路由
addRoute({
  path: '/contact',
  component: () => import('./views/Contact.vue') // 懒加载组件
});

export default router;

解释说明：

1. 创建路由器实例：使用 createRouter 和 createWebHistory 创建一个基于 HTML5 历史模式的路由器实例。
2. 初始路由配置：定义了两个初始路由，分别对应主页 (/) 和关于页面 (/about)。
3. 动态添加路由：通过 router.addRoute 方法可以动态地向路由器中添加新的路由。这里定义了一个 addRoute 函数来封装这个操作。
4. 懒加载组件：在添加新路由时，使用 import() 进行动态导入（懒加载），以优化应用的性能。

如果你需要在运行时动态添加路由，确保在适当的地方调用 addRoute 函数，并传入正确的路由配置对象。