vue动态路由的创建

import { createRouter, createWebHistory } from 'vue-router'
import store from '../store'

const routes = [
  {
    path: '/',
    redirect: 'login'
  },

  {
    path: '/main',
    name: 'main',
    component: () => import('../views/Main.vue'),
    children:[
      {
        path: '/Admin/index',
        name: '系统首页',
        component: () => import('../views/Admin/index/Index.vue')
      },
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  },

]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export function registerRouter(data) {
  for (let i = 0; i < data.length; i++) {
    // 如果数据中有children,就调用
    if (data[i].children) {
      registerRouter(data[i].children)
    } else {
      let arr = data[i].link.split('/')
      if (arr[2] !== undefined) {
        arr = arr.slice(2).join('/')
        router.addRoute('main',
          {
            path: data[i].link,
            name: data[i].name,
            component: () => import('../views/Admin/' + arr + '/Index.vue')
          })
      }
    }
  }
}


if (store.state.menu) {
  registerRouter(store.state.menu)
}


export default router

import router, { registerRouter } from "../router";
export default {
setup() {
const login = () => {
      api.login(form.username, form.password).then((res) => {
        console.log(res);
        store.commit("setToken", res.data.data.token);
        api.getMenus().then((res) => {
          console.log(res);
          // 动态注册路由
          registerRouter(res.data.data);
          // 把侧边导航栏数据存到vuex中
          store.commit("setMenus", res.data.data);
          router.push({ name: "main" });
        });
      });
    };
    return {
      login,
    };
}
}

以上是后台管理系统，动态路由创建首先需要后端返回菜单数据里有每一个路由的名字