前端实现动态路由

import { defineStore } from 'pinia';
import { returnRouterList } from "@/api/login";
import router from '@/router';
import { RouteRecordRaw } from 'vue-router'

// 定义菜单项的类型
interface ListItem {
  name: string
  path: string
  meta: Record<string, any>
  component: string
  children?: ListItem[]
}

// 定义加载组件的函数 -- 懒加载
function loadComponent(url: string) {
  let Module = import.meta.glob("@/views/**/*.vue")
  return Module[`/src/views/${url}.vue`]
}

// 定义编译routerList的函数
function compileList(routerList: ListItem[]) {
  routerList.forEach((item) => {
    const route: RouteRecordRaw = {
      name: item.name,
      path: item.path,
      meta: item.meta,
      component: loadComponent(item.component),
    }
    if (item.children && item.children.length) {
      compileList(item.children)
    }
    if (!item.children) {
      router.addRoute('layout', route)
    }
  })
}

export const useRouterListStore = defineStore('routerInfo', {
  state: () => {
    return {
      // 路由数组
      routerList: <ListItem[]>[]
    }
  },

  actions: {
    // 用户登录时获取路由列表 -- 首次登陆(没有localstorage)
    async getRouterList(id: number) {
        const res = await returnRouterList(id);
        this.routerList = res.data;
        this.setRouterList(this.routerList)
    },
    // 设置路由列表
    setRouterList(routerList: ListItem[]) {
      if (!routerList.length) {
        return;
      }
      // 翻译路由列表
      compileList(this.routerList)
    },
    // 添加路由 -- app挂在时调用(在挂载router之前)
    // (有localstorage)
    addRouter() {
      this.setRouterList(this.routerList)
    }
  },
  persist: true,
})