如何在Vue3和Vite项目中动态添加路由？

Question

这个所属公司里面我想动态添加几个从接口获取的二级行业并且生成对应的路由点击跳转不同的页面，这个在vue3和vite项目中要怎么实现呢

就比如这种效果

我想的是先通过rouer.option.route获取route，然后再拿到这个所属公司这个route，其次再获取接口拿到接口数据，通过addroute添加进去路由里面，然后我试了下这个方案不太行，而且会重复添加，我也不能设置一个变量去防止他重复添加，否则他一刷新页面，就不会添加了，这个有什么好的方案吗

Answer 1

你的思路是对的，重复添加的问题可以用api检测来避免。

写了个简单的示例，你看看
https://stackblitz.com/edit/vitejs-vite-umhiqj?terminal=dev

<script setup lang="ts">
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);
};
</script>

<template>
  <div class="container">
    <ul>
      <li @click="onClick('/')">Home</li>
      <li @click="onClick('/about')">About</li>
      <li v-for="item in menu" :key="item.path" @click="onClick(item.path)">
        {{ item.name }}
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<style scoped>
ul {
  padding: 0;
  margin: 0;
}

.container {
  padding: 100px;
}
</style>