devbox
算法构造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE-ROUTER忘掉手写路由，基于Meta标记的路由配置技术_router meta

作者：算法构造者 | 2024-02-04 13:46:32

赞

踩

router meta

其实笔者之前就有写过类似的文章。只是之前用于手机端路由的简单配置，而今天和之前的使用略有不同，今天需要解决的是PC后台的路由配置，而路由的菜单，是基于vue-router的方案。Vue-Admin-Beautiful和V3-Admin之类的框架都可以使用本方案实现自动路由配置。本文的环境是V3-Admin（V3-Admin-Vite 中文文档 - 掘金）

思路

        基于约定大于配置的思想，我们采用路径文件扫描的方式实现自动配置。做过后端的同学就很清楚，java体系里非常著名的spring框架就采用了大量自动配置方式，给代码模块增加Annotaion注释，在配置过程中扫描具备对应注释的文件来自动配置。而在前端体系的webpack和vite都具备有相应的模式，虽然不像后端体系那样完善，但是也可以实现类似的效果。在对应文件中直接配置路由节点，更加接近对象思维，减少配置出错。但是对应的代价就是模块名称尽量做到唯一，这个只要稍微注意下一般问题不大。

来看看最终达到的效果：

1）无需配置异步路由，基于文件标记的模式，默认扫描路径/src/views，即认为views目录就是你的菜单根，下面的文件目录可以配置为多级菜单的目录节点，而目录下的模块根据是否导出配置来识别为菜单叶节点；

2）模块的标记只需给vue文件添加一个<script>块导出meta配置，该模块即自动出现在菜单路径，并可以自动识别挂载在对应的目录节点下。例如：

  1. import { RouterMeta } from '@/router/auto-router'
  2. export const routerMeta: RouterMeta = {
  3.   title: '多级菜单',
  4.   icon: 'menu',
  5.   roles: ['role11'],
  6.   position: 100
  7. }

3）目录的标记采用在目录下添加routerMeta.ts文件，内容与模块<script>的一致，标记的目录名称即路由path；

4）剩下就没有其它事情了，根据src/views下的目录结构，菜单已经自动配置好。享受无需编辑路由配置文件的便利~

配置实战

好了，直接讲概念，大家可能还不好理解，直接来个配置实战，看看自动配置后带来的便利。

先看下配置结构，我们采用typescript来描述下配置参数，我们只关心这些，我们也只需要添加这些：

  1. export type RouterMeta = {
  2.   title: string // 设置该路由在侧边栏、面包屑、以及顶部TAB展示的名字
  3.   icon?: string // 设置该路由的图标，记得将 svg 导入 @/icons/svg
  4.   roles?: string[] // 设置该路由进入的权限，支持多个权限叠加
  5.   position?: number // 目录或模块的排序，默认为100，同position则为字母顺序
  6.   alwaysShow?: true // 当一级路由只有一个时，是直接显示还是显示多一层目录，默认是false
  7.   hidden?: true // 如果设置hidden，则为隐藏的模块，如果作用于目录，则下级所有的节点模块都不显示
  8.   pathDefault?: true // 当前路由是否为母路由的默认节点，如果是，那么会在母路由生成redirect指向当前节点，用于面包屑跳转等
  9. }

下一步还是以V3默认的多级菜单来作为配置例，唯一不同的是，子路由模板外层我们不增加任何其他内容，采用EmptyLayout.vue（VAB Admin直接会提供，V3 Admin则要自己添加一个）

  1. <template>
  2.   <router-view />
  3. </template>

传统模式

如果我们采用传统VUE Router配置方式，需要写这样长长的一段配置

  1.   {
  2.     path: "/menu",
  3.     component: Layout,
  4.     redirect: "/menu/menu1",
  5.     name: "Menu",
  6.     meta: {
  7.       title: "多级菜单",
  8.       icon: "menu"
  9.     },
  10.     children: [
  11.       {
  12.         path: "menu1",
  13.         component: () => import("@/views/menu/menu1/index.vue"),
  14.         redirect: "/menu/menu1/menu1-1",
  15.         name: "Menu1",
  16.         meta: { title: "menu1" },
  17.         children: [
  18.           {
  19.             path: "menu1-1",
  20.             component: () => import("@/views/menu/menu1/menu1-1/index.vue"),
  21.             name: "Menu1-1",
  22.             meta: { title: "menu1-1" }
  23.           },
  24.           {
  25.             path: "menu1-2",
  26.             component: () => import("@/views/menu/menu1/menu1-2/index.vue"),
  27.             redirect: "/menu/menu1/menu1-2/menu1-2-1",
  28.             name: "Menu1-2",
  29.             meta: { title: "menu1-2" },
  30.             children: [
  31.               {
  32.                 path: "menu1-2-1",
  33.                 component: () => import("@/views/menu/menu1/menu1-2/menu1-2-1/index.vue"),
  34.                 name: "Menu1-2-1",
  35.                 meta: { title: "menu1-2-1" }
  36.               },
  37.               {
  38.                 path: "menu1-2-2",
  39.                 component: () => import("@/views/menu/menu1/menu1-2/menu1-2-2/index.vue"),
  40.                 name: "Menu1-2-2",
  41.                 meta: { title: "menu1-2-2" }
  42.               }
  43.             ]
  44.           },
  45.           {
  46.             path: "menu1-3",
  47.             component: () => import("@/views/menu/menu1/menu1-3/index.vue"),
  48.             name: "Menu1-3",
  49.             meta: { title: "menu1-3" }
  50.           }
  51.         ]
  52.       },
  53.       {
  54.         path: "menu2",
  55.         component: () => import("@/views/menu/menu2/index.vue"),
  56.         name: "Menu2",
  57.         meta: { title: "menu2" }
  58.       }
  59.     ]
  60.   }

解释下上面配置逻辑（顺便凑点字数）：

1）一级节点为 【多级菜单】，面包屑点击则跳转到/menu/menu1，/menu/menu1路径看子节点的配置，是指向/menu/menu1/menu1-1，而/menu/menu1/menu1-1路径再看下集节点，是指向@/views/menu/menu1/menu1-1/index.vue

2）一级节点下有【menu1-1】,【menu1-3】模块和二级节点【menu1-2】，menu2面包屑点击跳转到/menu/menu1/menu1-2/menu1-2-1，对应指向的是@/views/menu/menu1/menu1-2/menu1-2-1/index.vue

3）二级节点【menu1-2】下有【menu1-2-1】和【menu1-2-2】两个模块

自动配置

下一步我们把这个配置拿掉，换成自动配置（auto-router的代码在文末）

  1. import autoRouter from './auto-router'
  2.  
  3. export const asyncRoutes: Array<RouteRecordRaw> = autoRouter()

然后记得把404未找到的配置放到后面去push，就是这段：（一般原路由都会写，未完整贴上，也就是404的逻辑拿出来放到最后配置）

  1. asyncRoutes.push({
  2.  
  3.   path: '/:pathMatch(.*)*', // 必须将 'ErrorPage' 路由放在最后, Must put the 'ErrorPage' route at the end......

然后开始配置一级，在目录/src/views/menu/menu1下建立文件routerMeta.ts

  1. import { RouterMeta } from '@/router/auto-router'
  2. export const routerMeta: RouterMeta = {
  3.   title: '多级菜单'
  4. }

接下来1级菜单的指向，是由子节点meta的pathDefault决定，写在哪个子节点，它父节点在面包屑点击的时候就会跳转到这个子节点，一个ture代替了传统配置一段路径编写，减少出错（你可能会说，传统配置可以跳转到非子路径的其他路径啊？我只能说这种设计结构我 #/*/☆，有点正常思维吧）

修改@/views/menu/menu1/index.vue，在尾部增加代码块

  1. <script lang="ts">
  2. import { RouterMeta } from '@/router/auto-router'
  3. export const routerMeta: RouterMeta = {
  4.   title: 'menu1-1',
  5.   pathDefault: true
  6. }
  7. </script>

由于上级目录面包屑指向此节点，因此用pathDefault来标记

修改@/views/menu/menu3/index.vue，在尾部增加代码块

  1. <script lang="ts">
  2. import { RouterMeta } from '@/router/auto-router'
  3. export const routerMeta: RouterMeta = {
  4.   title: 'menu1-3'
  5. }
  6. </script>

在目录 @/views/menu/menu2下增加配置描述文件routerMeta.ts

  1. import { RouterMeta } from '@/router/auto-router'
  2. export const routerMeta: RouterMeta = {
  3.   title: 'menu1-2',
  4.   pathDefault: true
  5. }

这样二级节点就配置完了（二级节点里目录面包屑指向在三级节点里配置）

下一步配置三级节点。同样，在 @/views/menu/menu1/menu1-2/menu1-2-1/index.vue和@/views/menu/menu1/menu1-2/menu1-2-2/index.vue文件里增加分别路由描述内容

  1. <script lang="ts">
  2. import { RouterMeta } from '@/router/auto-router'
  3. export const routerMeta: RouterMeta = {
  4.   title: 'menu1-2-1'
  5. }
  6. </script>

和

  1. <script lang="ts">
  2. import { RouterMeta } from '@/router/auto-router'
  3. export const routerMeta: RouterMeta = {
  4.   title: 'menu1-2-2'
  5. }
  6. </script>

对比传统配置，总的代码量看上去少不了多少，但是我们发现自动配置后我们除了关心title和pathDefault目录默认跳转以外不用写任何路径，byebye了json的嵌套地狱。一切都会自动配置好，避免出错，提高效率。

而删除则更方便，直接文件或目录删除，对应路由节点就没了不用额外管配置文件。

核心代码

好了，最后放出实现这神奇功能的代码段，放到@/router/auto-router.ts

  1. /**
  2.  * 基于vite路径扫描的Router自动配置
  3.  * @author Jim
  4.  */
  5.  
  6. import { RouteRecordRaw } from 'vue-router'
  7.  
  8. const BaseLayout = () => import('@/layout/index.vue')
  9. const EmptyLayout = () => import('@/layout/EmptyLayout.vue')
  10.  
  11. export type RouterMeta = {
  12.   title: string // 设置该路由在侧边栏、面包屑、以及顶部TAB展示的名字
  13.   icon?: string // 设置该路由的图标，记得将 svg 导入 @/icons/svg
  14.   roles?: string[] // 设置该路由进入的权限，支持多个权限叠加
  15.   position?: number // 目录或模块的排序，默认为100，同position则为字母顺序
  16.   alwaysShow?: true // 当一级路由只有一个时，是直接显示还是显示多一层目录，默认是false，对以及目录配置有效
  17.   hidden?: true // 如果设置hidden，则为隐藏的模块，如果作用于目录，则下级所有的节点模块都不显示
  18.   pathDefault?: true // 当前路由是否为母路由的默认节点，如果是，那么会在母路由生成redirect指向当前节点，用于面包屑跳转等
  19. }
  20.  
  21. const config: () => Array<RouteRecordRaw> = () => {
  22.   const scanResult: Record<string, any> = import.meta.globEager('../views/**/(*.vue|routerMeta.ts)')
  23.   const dirNodes: Record<string, any> = {}
  24.   const workList = []
  25.   for (const key in scanResult) {
  26.     if (scanResult[key].routerMeta) {
  27.       let dirPath = key
  28.       let name = ''
  29.       const isDirectory = key.endsWith('routerMeta.ts')
  30.       dirPath = dirPath.substring(0, dirPath.lastIndexOf('.'))
  31.       if (dirPath.endsWith('/index') || isDirectory) {
  32.         dirPath = dirPath.substring(0, dirPath.lastIndexOf('/'))
  33.       }
  34.       name = dirPath.substring(dirPath.lastIndexOf('/') + 1, dirPath.length)
  35.       dirPath = dirPath.substring(8, dirPath.lastIndexOf('/'))
  36.  
  37.       const node = {
  38.         parent: null,
  39.         dirPath: dirPath, // 所在的目录
  40.         name: name,
  41.         isDirectory: isDirectory,
  42.         filePath: key, // 文件位置
  43.         meta: scanResult[key].routerMeta, // 描述
  44.         children: []
  45.       }
  46.       workList.push(node)
  47.       if (isDirectory) {
  48.         dirNodes[dirPath + '/' + name] = node
  49.       }
  50.     }
  51.   }
  52.  
  53.   // 构建目录结构
  54.   Object.values(dirNodes).forEach((node: any) => {
  55.     const parent = dirNodes[node.dirPath]
  56.     if (parent) {
  57.       parent.children.push(node)
  58.       node.parent = parent
  59.     }
  60.   })
  61.   // 挂载模块
  62.   workList.forEach((node: any) => {
  63.     if (!node.isDirectory) {
  64.       const parent = dirNodes[node.dirPath]
  65.       if (parent) {
  66.         parent.children.push(node)
  67.         node.parent = parent
  68.       }
  69.     }
  70.   })
  71.  
  72.   // 完善对象 & 排序
  73.   const visit = (nodeList: any[]) => {
  74.     // 处理排序
  75.     nodeList.sort((a: any, b: any) => {
  76.       let aPosition = 100
  77.       if (typeof a.meta?.position === 'number') {
  78.         aPosition = a.meta?.position
  79.       }
  80.       let bPosition = 100
  81.       if (typeof b.meta?.position === 'number') {
  82.         bPosition = b.meta?.position
  83.       }
  84.       return aPosition - bPosition
  85.     })
  86.  
  87.     nodeList.forEach(node => {
  88.       // 处理redirect
  89.       let redirect
  90.       node.children.forEach((childNode: any) => {
  91.         if (childNode.meta.pathDefault) {
  92.           redirect = `${childNode.dirPath}/${childNode.name}`
  93.         }
  94.       })
  95.       if (redirect) {
  96.         node.redirect = redirect
  97.       }
  98.  
  99.       if (!node.path) {
  100.         node.path = node.name
  101.       }
  102.       node.name = node.name.slice(0, 1).toUpperCase() + node.name.slice(1)
  103.       if (!node.component) {
  104.         if (node.isDirectory) {
  105.           node.component = EmptyLayout
  106.         } else {
  107.           node.component = () => import(/* @vite-ignore */ node.filePath)
  108.         }
  109.       }
  110.       if (node.children.length > 0) {
  111.         visit(node.children) // 递归处理
  112.       } else {
  113.         delete node.children
  114.       }
  115.     })
  116.   }
  117.  
  118.   // 抽离并完善一级节点
  119.   const result: Array<RouteRecordRaw> = workList
  120.     .filter(node => {
  121.       return node.dirPath === ''
  122.     })
  123.     .map((node: any) => {
  124.       if (!node.component) {
  125.         node.component = BaseLayout
  126.       }
  127.       node.path = '/' + node.name
  128.       return node
  129.     })
  130.  
  131.   visit(result)
  132.  
  133.   console.log(result)
  134.   return result
  135. }
  136.  
  137. export default config

然后最后说明3个问题：

1）一级节点要实现模块跳转，只能在上面添加一个目录节点，当然有兴趣也可以自行去完善；

2）由于采用的是文件名扫码，节点的排序默认会以文件名字符来进行排序，你可以在meta描述里指定position来控制位置，如果不指定，等同于position=100，相同position内以文件名称来进行排序

3）hidden可直接用于目录描述文件，那么下级所有的子模块都是隐藏的。即不出现在菜单

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/58847
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号