如何在Vue3和Vite项目中动态添加路由？-灵析社区
七厦你的思路是对的，重复添加的问题可以用`api`检测来避免。 写了个简单的示例，你看看 [https://stackblitz.com/edit/vitejs-vite-umhiqj?terminal=dev](https://link.segmentfault.com/?enc=OsQIofYOTRxUWrTenoka6A%3D%3D.HUzFAYCpC5xIUGsg2pT2FOnPewr8AJ4e2We%2F2FTouKHLCn7Ex%2BMeWPWi6ekx9dUhsAVYacwbFWcjJH32Rd95NQ%3D%3D) import { ref, onMounted } from 'vue'; import router from './router'; import Home from './components/Home.vue'; import User from './components/User.vue'; import Video from './components/Video.vue'; import Compute from './components/Compute.vue'; import Container from './components/Container.vue'; const fetchRoutes = () => new Promise((resolve) => { const items = [ { name: 'video', path: '/video', text: '云视频', }, { name: 'compute', path: '/compute', text: '云算力', }, { name: 'container', path: '/container', text: '容器服务', }, ]; setTimeout(() => { resolve(items); }, 1000); }); const menu = ref([]); const componentSchema = { video: Video, compute: Compute, container: Container, }; onMounted(async () => { // 1 根据公司拉取路由数据 const items = await fetchRoutes(); // 2 保存菜单数据用于渲染菜单 menu.value = items; // 3 用数据添加router items.forEach(({ name, path }) => { const component = componentSchema[name]; // 阻止重复添加 if (router.hasRoute(name)) { return; } if (component) { router.addRoute({ name, path, component }); } }); // 新增的路由装载完后，调用一下replace，用于渲染新增的路由 router.replace(); }); const onClick = (path) => { router.push(path); }; Home About {{ item.name }} ul { padding: 0; margin: 0; } .container { padding: 100px; }