简单实现前端动态路由

前言

通过后端接口的返回值，动态添加路由，是作为权限控制的一种常见方式，本文将简单讲解如何在Vue3中动态添加路由。

示例数据

[
  {
    "id": 1,
    "pid": 0,
    "url": "/dashboard",
    "title": "控制面板板",
    "component": "/src/views/dashboard/DashboardView.vue",
    "icon": "SlidersOutlined",
    "is_show": 0,
    "level": 1,
    "sort": 1,
    "order": "1",
    "type": "menu",
    "status": 0,
    "children": null
  },
  {
    "id": 2,
    "pid": 0,
    "url": "/system",
    "title": "系统设置",
    "component": null,
    "icon": "ToolOutlined",
    "is_show": 0,
    "level": 1,
    "sort": 7,
    "order": "2",
    "type": "menu_dir",
    "tips": null,
    "status": 0,
    "children": [
      {
        "id": 7,
        "pid": 2,
        "url": "/system/menu",
        "title": "菜单管理",
        "component": "/src/views/system/MenuView.vue",
        "icon": "BarsOutlined",
        "is_show": 0,
        "level": 2,
        "sort": 3,
        "order": "2,7",
        "type": "menu",
        "tips": null,
        "status": 0,
        "children": [
          {
            "id": 8,
            "pid": 7,
            "url": "/system/menu/add",
            "title": "新增菜单",
            "component": null,
            "icon": null,
            "is_show": 1,
            "level": 3,
            "sort": 1,
            "order": "2,7,8",
            "type": "button",
            "tips": null,
            "status": 0,
            "children": null
          }
        ]
      }
    ]
  },
]

思路分析

动态添加路由的实质，就是先将后端返回的json数据转化成一个个RouteRecordRaw形式的对象，然后调用Vue Router的addRoute方法，添加进路由列表中。由于每个路由地址都会对应一个Vue组件，因此还需要将Vue组件都通过import.meta.glob读取到内存中。

具体实现函数

const viewsComponent: Record<string, any> = import.meta.glob("/src/views/**/*.vue", { eager: true })

const addRouteAll = (menu: RoleMenu[]) => {  //RoleMenu就是接口返回的数据的类型
    menu.forEach(item => {
        if (item.type === "menu" && viewsComponent[item.component]) {
            addRouteItem(item)
        }
        if (item.children && item.children.length > 0) {
            addRouteAll(item.children)
        }
    })
}

const addRouteItem = (route: RoleMenu) => {
    const path = route.url
    const component = viewsComponent[route.component]
    const routeBaseInfo: RouteRecordRaw = {
        path,
        name: path.substring(1),
        component: component.default,
        meta: {
            title: route.title,
            icon: route.icon,
            keepalive: route.children && route.children.length > 0 ? 0 : path.substring(1),
            menu_type: "tab",
            type: route.type,
            url: route.url,
            addTab: true
        }
    }
    router.addRoute(routeBaseInfo)
}

存在问题

路由何时处理？

笔者一开始认为，登录成功后立刻调用获取菜单的接口，然后处理路由，因此路由的处理应该在登录页面中的登录请求成功后进行处理，但是此时存在一个问题，用户登录成功进入后台页面，然后用户刷新页面，就会提示导航失败，控制台也会报错，因此笔者认为应该在登录成功进入后台页面之后开始处理。

笔者后台的主体页面框架为MainLayout，因此笔者在此进行路由处理。

const getMenu = () => {
    apiAuthMenuList().then(res => {
        menuList.value = handleMenu(res.content)  //菜单处理
        addRouteAll(res.content)
    })
}

onMounted(() => {
    getMenu()
})

导航失败

⚠️ [Vue Router warn] : No match found for location with path "/dashboard"

这是因为路由跳转的时机要早于组件挂载，因此在组件挂载并处理路由前，路由就已经跳转并报错了。

笔者解决这个问题的思路有两个：

首先定义全局变量routeReady，初始值为false，当路由处理完成后变为true

1. 在路由守卫beforeEach中判断，如果routeReady为false则处理路由，处理完成后跳转。

2. 创建一个Loading页面，如果路由没有匹配的地址则跳转至Loading页面，并在该页面进行判断：

   • 如果routeReady为true，说明去往的地址并不在该用户的权限菜单中，转向404页面
   • 如果routeReady为false，则说明路由未加载完成，那么就在当前页面等待，等routeReady为true时，再执行上面的判断

笔者这里用了方法2。

//截获所有未匹配的路由，进入Loading页面
{
    path: "/:pathMatch(.*)*",
    component: () => import("../views/LoadingView.vue")
}

//LoadingView.vue
watchEffect(() => {
    if (globalStore.routeReady) {
        const routeList = router.getRoutes()
        if (routeList.find(i => i.path === router.currentRoute.value.fullPath)) {
            router.push(router.currentRoute.value.fullPath)
        } else {
            router.push("/notFound")
        }
    }
})

通过这种方式，可以在用户刷新页面后有一个顺滑的体验。

进入第一个路由

目前还存在一个问题，用户在登录跳转后，会进入后台页面，但是此时不会进入到任一菜单中：

而我们希望登录跳转后能自动进入到第一个菜单，即：

因此我们需要一个方法来找到第一个可用的路由：

const getFirstRoute = (routes: RouteRecordRaw[]): false | RouteRecordRaw => {
    const routerPaths: string[] = []
    const routers = router.getRoutes()
    routers.forEach(item => {
        if (item.path) routerPaths.push(item.path)
    })
    let find: boolean | RouteRecordRaw = false
    for (const key in routes) {
        if (routes[key].meta?.type != "menu_dir" && routerPaths.indexOf(routes[key].path) !== -1) {
            return routes[key]
        } else if (routes[key].children && routes[key].children?.length) {
            find = getFirstRoute(routes[key].children!)
            if (find) return find
        }
    }
    return find
}

然后调用这个方法即可：

const init = () => {
    const firstRoute = getFirstRoute(menuList.value!)
    if (firstRoute) {
        router.push(firstRoute.path)
    }
}

onMounted(() => {
    init()
})

后记

至此一个简单的动态路由就实现了，如果你有更好的意见或建议，欢迎留言交流。