Vue3中简单实现动态添加路由

前言

通过后端接口的返回值，动态添加路由，是作为权限控制的一种常见方式，本文将简单讲解如何在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

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

• 创建一个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()
})

后记

来源：https://juejin.cn/post/7238795712569245753