Vue-Router在有新组件时动态添加新路由

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

// 初始路由配置
const routes = [
  { path: '/', component: Home }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// 动态添加路由的方法
function addRoute(path, component) {
  router.addRoute({ path, component });
}

// 假设我们有一个新组件 NewComponent
import NewComponent from './components/NewComponent.vue';

// 在某个时刻动态添加新路由
addRoute('/new-route', NewComponent);

export default router;

// 添加路由后，手动导航到新路由
addRoute('/new-route', NewComponent);
router.push('/new-route');

// 假设从后端获取路由配置
fetch('/api/routes')
  .then(response => response.json())
  .then(routesConfig => {
    routesConfig.forEach(routeConfig => {
      addRoute(routeConfig.path, () => import(`./components/${routeConfig.component}.vue`));
    });
  });