webTest/src/App.vue

<template>
  <div id="app">
    <Sidebar></Sidebar>
    <router-view />
  </div>
</template>

<script>
import Sidebar from "./layout/Sidebar";
import { getRolesMenu } from "@/api/login";
import router, { constantRoutes } from "@/router";
export default {
  name: "App",
  components: {
    Sidebar: Sidebar,
  },
  created() {
    this.asyncMenu();
  },
  methods: {
    asyncMenu() {
      /**
        path: '/home',
        name: 'home',
        title: '首页',
        component: () => import('@/views/home/home')
       */
      getRolesMenu().then((res) => {
        console.log(res);
        let asyncRouter = res.data.map((v) => {
          return {
            path: v.path,
            name: v.name,
            title: v.title,
            component: () => import(`@/views/${v.url}`),
          };
        });
        console.log(router);
        console.log("asyncRouter");
        console.log(asyncRouter);
        let allRouter = constantRoutes.concat(asyncRouter);
        router.addRoutes(allRouter);
        router.options.routes = allRouter;
      });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>