vue3 做一个后台管理用的轻量级路由 + 菜单

Vue3 的后台管理的项目想要做个菜单的话,一般会使用 VueRouter 设置路由,然后用UI库的菜单组件(比如 el-menu)设置各种属性,然后还需要考虑权限等问题。
这样做虽然很灵活,但是对于简单项目就有点麻烦。那么我们能不能简化一下操作,只设置一次,就可以实现菜单、路由外加权限的功能呢?

技术栈 / 基础工具

  • vue3,script setup
  • 动态组件、异步组件
  • window.history
  • element-plus:el-menu、el-tabs

在线演示

https://naturefw.gitee.io/nf-rollup-ui-controller
可以来这里看看效果,好吧其实也没啥特别的,看效果也没啥区别,只是使用的时候比较很方便。

源码

https://gitee.com/naturefw/nf-rollup-ui-controller

思路

首先模仿 VueRouter 设置一个路由,这里简化一下,只考虑单层路由。然后再设置上菜单需要的属性。
因为要做二级菜单,所以再设置一个分组信息,另外再加上图标(icon)的设置,这样基本就够用了。
然后设置页面布局,根据设置绑定菜单(el-menu),加载组件即可。

设置路由和菜单

import { defineAsyncComponent } from 'vue'
import home from './home.vue'
import { Loading, Connection, Edit, FolderOpened } from '@element-plus/icons'

// 基础路径
const baseUrl = '/nf-rollup-ui-controller'

/**
 * 一级菜单,设计包含哪些二级菜单
 */
const group = [
  {
    id: 1,
    title: '基础控件',
    icon: FolderOpened,
    children: [
      'base_html',
      'base_ui',
      'base_transmit',
      'base_item'
    ]
  },
  {
    id: 2,
    title: '复合控件',
    icon: FolderOpened,
    children: [
      'nf_form',
      'nf_find',
      'nf_grid',
      'nf_button',
      'nf_crud'
    ]
  }
]

/**
 * 二级菜单,设置路径、标题、图标和加载的组件
 */
const routes = {
  base_html: {
    path: '/base-html',
    title: '原生HTML',
    icon: Edit,
    component: () => import('./ui/base/c-01html.vue')
  },
  base_ui: {
    path: '/base-ui',
    title: 'UI库组件',
    icon: Edit,
    component: () => import('./ui/base/c-02UI.vue')
  },
  base_transmit: {
    path: '/base-transmit',
    title: '传声筒',
    icon: '',
    component: () => import('./ui/base/c-03transmit.vue')
  } 
}

  • 设置基础路径
    本地开发可以使用根目录,但是项目发布后可能无法使用根目录了,这时候就需要设置一个基础路径,以应对只能使用二级目录的情况。

  • 预留权限接口
    这里的 children 只是记录了路由的 key ,而不是完整的路由配置,这样设计是为了以后可以方便的加上权限,可以按照权限过滤掉没有权限的路由(模块)的key,这样加权限就方便多了。

  • 图标的设置方式
    因为 element-plus 使用“组件”形式的图标,所以还得用动态组件的方式来加载图标,需要在设置的地方引入需要的图标,然后设置到菜单的属性里面,这样就可以实现图标的设置了。

  • 组件的设置
    采用异步组件(defineAsyncComponent)来加载需要的组件,设置方式和 VueRouter 保持一致。

设计加载组件和刷新的处理方法

然后设计两个函数,一个是加载组件的,一个是页面刷新后根据 url路径 加载组件的函数。

// 加载路由指定的组件
const getComponent = (key) => {
  const route = routes[key]
  if (route) {
    // 设置标题
    document.title = route.title
    // 设置url地址
    window.history.pushState(null, null, baseUrl + route.path)
    // 返回组件
    return defineAsyncComponent(route.component)
  } else {
    return home
  }
}

// 刷新时依据url加载组件
const refresh = (cb) => {
  const path = window.location.pathname
  if (path === '/' || path === baseUrl) {
    // 首页
  } else {
    const tmp = path.replace(baseUrl, '')
    // 加载组件
    for (const key in routes) {
      const route = routes[key]
      if (route.path === tmp) {
        if (typeof cb === 'function'){
          cb(key)
        }
        break
      }
    }
  }
}

// 导出配置和函数
export {
  group,
  routes,
  getComponent,
  refresh
}
  • 设置标题和 URL 地址
    点击菜单,加载组件,顺便设置一下浏览器的标题和 URL 的路径。
    虽然现在浏览器都是标签的形式,没有太大的空间显示标题,不过设置一下标题也不麻烦。
    然后用 window.history.pushState 设置一下浏览器的 URL 路径,这样设置不会导致浏览器向服务器请求页面。

  • 刷新自动加载组件
    刷新页面后如果不做设置的话,是不会依据 URL 加载对应的组件的,所以还需要我们写个函数处理一下。
    首先获取 URL 的路径(pathName),然后到路由设置里面查找对应的组件,然后加载即可。
    这里做了一个回调函数,可以更方便一些。

绑定菜单

做一个菜单的组件,比如叫做 menu.vue,引入上面的设置,然后绑定到 el-menu 上面。

  
    
      
      
        
      
    
  

使用动态组件(component)加载图标 ,其他的按照 el-menu 的要求进行设置即可,这样一个简单的二级菜单就做好了。

然后设置一个组件属性,用于传递选择的菜单。


const props = defineProps({
  events: Object
})
const events = props.events

// 二级菜单被选中
const select = (index, indexPath) => {
  events.currIndex = index  // 路由的key
}

设计页面布局

采用 el-container 做页面布局,左面是菜单,右面加载对应的组件。

  
    
      
      
    
    
      
      
      
    
  

引入配置和函数,设置选择的菜单的对象,这样就可以了。


const events = reactive({
  currIndex: ''
})

refresh((key) => {
  events.currIndex = key
})

加上权限过滤

设计权限的时候,需要标注可以访问哪些菜单,也就是组件,然后设置好对应的菜单(路由)的 key 即可。绑定的地方换成过滤后的数组即可。

实现多tab标签页

上面的方法是实现了“单页”的方式,点一个菜单加载一个组件,再点一个菜单,替换掉原来的组件。
如果想做成 tab 标签页的形式要怎么做呢?
其实也很简单,我们只需要增加一个 数组 (Set,tabs) 用于存放点击过的菜单的key,然后依据 tabs 绑定 el-tabs 即可。

  • 设置容器和监听
const tabs = reactive(new Set([])) // 点击过且没有关闭的二级菜单,做成动态tab标签

// 监听当前路由,设置 tabs
    watch(() =>currentRoute.key, (key) => {
      tabs.add(key)
      const route = this.routes[key] ?? {title: '首页', path: '/'}
      // 设置标题
      document.title = route.title
      // 设置url地址
      window.history.pushState(null, null, this.baseUrl + route.path)
    })
  • 绑定el-tabs
  
    
     
      
      
    
  

这样就可以了。

把零散的代码封装成 函数库 + 组件

基本功能测试通过,回顾一下代码,还是有一些麻烦,我们可以进一步封装一下:

  • 路由+菜单的函数库
  • 菜单组件(nf-menu)
  • 路由视图——单页(router-view)
  • 路由视图——tabs(router-view-tabs)

这样封装之后就方便多了,另外顺便重构一下代码。

路由的函数库

我们可以用 ES6 的 class 来定义,实现各种基础功能。

import { defineAsyncComponent, reactive, watch, inject } from 'vue'

const flag = Symbol('nf-router-menu___')

/**
 * 一个简单的路由
 * @param {*} baseUrl 基础路径
 * @param {*} routes 路由设置
 * * {
 * *   base_html: { // 路由的 name
 * *     path: '/base-html',
 * *     title: '原生HTML',
 * *     icon: Edit,
 * *     component: () => import('./ui/base/c-01html.vue')
 * *   },
 * *   其他路由设置 
 * * }
 * @returns 
 */
class Router {
  constructor (info) {
    // 设置当前选择的路由
    this.currentRoute = reactive({
      key: ''
    })
    this.baseUrl = info.baseUrl // 基础路径,应对网站的二级目录
    this.home = info.home // 默认的首页
    this.group = info.group // 一级菜单,分组,设置包含的二级菜单(路由)
    this.routes = info.routes // 路由设置,二级菜单
    /**
     * 'key', 'key' // 保存路由的key(name)
     */
    this.tabs = reactive(new Set([])) // 点击过且没有关闭的二级菜单,做成动态tab标签
    // 把路由里的组件转换一下
    this.routerControl = {}
    this.setup()
  }
  /**
   * 初始化设置
   */
  setup = () => {
    // 监听当前路由,设置 tabs
    watch(() => this.currentRoute.key, (key) => {
      if (key !== 'main' ) this.tabs.add(key)
      const route = this.routes[key] ?? {title: '首页', path: '/'}
      // 设置标题
      document.title = route.title
      // 设置url地址
      window.history.pushState(null, null, this.baseUrl + route.path)
    })
    // 把路由里的组件转换一下
    for (const key in this.routes) {
      const r = this.routes[key]
      this.routerControl[key] = defineAsyncComponent(r.component)
    }
  }
  // 加载路由指定的组件
  getComponent = () => {
    if (this.currentRoute.key === '') {
      return this.home
    } else {
      const route = this.routes[this.currentRoute.key]
      if (route) {
        // 返回组件
        return defineAsyncComponent(route.component)
      }
    }
  }
  // 删除tab
  removeTab = (key) => {
    // 转换为数组,便于操作
    const arr = Array.from(this.tabs)
    
    if (arr.length === 1) {
      // 只有一个tab,删除后激活桌面
      this.tabs.delete(key)
      this.currentRoute.key = 'home'
      return
    }

    // 判断是否当前tab,如果是当前tab,激活左面或者右面的tab
    if (this.currentRoute.key === key) {
      // 查找当前tab的数组序号
      const index = arr.indexOf(key)
      // 判断当前tab的位置
      if (index === 0) {
        // 第一位,激活后面的
        this.currentRoute.key = arr[1]
      } else {
        // 激活前面的
        this.currentRoute.key = arr[index - 1]
      }
    }
    // 删除
    this.tabs.delete(key)
  }

  // 刷新时依据url加载组件
  refresh = () => {
    const path = window.location.pathname
    if (path === '/' || path === this.baseUrl) {
      // 首页
    } else {
      const tmp = path.replace(this.baseUrl, '')
      // 验证路由
      for (const key in this.routes) {
        const route = this.routes[key]
        if (route.path === tmp) {
          this.currentRoute.key = key
          break
        }
      }
    }
  }
}

/**
 * 创建简易路由
 */
const createRouter = (info) => {
  // 创建路由,
  const router = new Router(info)
  // 使用vue的插件,设置全局路由
  return (app) => {
    // 便于模板获取
    app.config.globalProperties.$router = router
    // 便于代码获取
    app.provide(flag, router)
  }
}
// 在代码里获取路由
const useRouter = () => {
  return inject(flag)
}

export {
  createRouter,
  useRouter
}

首先定义一个class,存放需要的各种属性和处理方法,然后做一个Vue的插件,便于做初始化的设置和全局变量。最后做一个获取路由的函数即可。

菜单组件:nf-menu

  
    
      
      
        
      
    
  

封装的不够细致,主要目的是可以偷懒用着方便就好。
不求灵活,只求方便,简单粗暴的实现功能即可。

单页路由视图:router-view


这个就很简单了,用动态组件加载需要的组件即可。

动态tab标签页:router-view-tabs

  
    
      
      
    
    
     
      
      
    
  

这个稍微复杂一点,用属性绑定 el-tabs,设置属性、图标和事件 。

在项目里的使用方法

首先定义一个路由,然后在 main.js 里面挂载。然后布局里面加载组件即可。

  • 定义路由和菜单
    /router/index.js
import { Loading, Connection, Edit, FolderOpened } from '@element-plus/icons'
import { createRouter } from '/nf-ui-core'
import home from '../views/home.vue'

export default createRouter({
  /**
   * 基础路径
   */
  baseUrl: '/nf-rollup-ui-controller',
  /**
   * 首页
   */
  home: home,
  /**
   * 一级菜单,设计包含哪些二级菜单
   */
  group = [
    {
      id: 1,
      title: '基础控件',
      icon: FolderOpened,
      children: [
        'base_html',
        'base_ui',
        'base_transmit',
        'base_item'
      ]
    },
    {
      id: 2,
      title: '复合控件',
      icon: FolderOpened,
      children: [
        'nf_form',
        'nf_find',
        'nf_grid',
        'nf_button',
        'nf_crud'
      ]
    }
  ],

  /**
   * 二级菜单,设置路径、标题、图标和加载的组件
   */
  routes = {
    base_html: {
      path: '/base-html', title: '原生HTML', icon: Edit,
      component: () => import('../views/ui/base/c-01html.vue')
    },
    base_ui: {
      path: '/base-ui', title: 'UI库组件', icon: Edit,
      component: () => import('../views//ui/base/c-02UI.vue')
    }, 
    ... 略
  }
})
  • 在 main.js 里挂载路由和组件
import { createApp } from 'vue'
import App from './App.vue'

// 基于element-plus 二次封装的组件
import { nfElementPlus } from '/nf-ui-elp'

// 简易路由
import router from './router'

createApp(App)
  .use(nfElementPlus) // 全局注册组件
  .use(router) // 注册路由
  .mount('#app')
  • 在App.vue 里面做页面布局
  
    
      
      
    
    
      
        
        
       可以切换单页模式、动态tab模式
      

这里为了演示,用了两种模式,项目里选择一个喜欢的就好。

是不是很简单,把繁琐的操作都封装好,以后再用就简单多了,只需要定义路由就好。

疑问

  • 单层路由够用吗?
    对于我来说够用了,如果以后发现有不够用的地方还可以继续完善,不过肯定不会完善到 VueRouter 的程度,因为那样的话,为啥不直接用 VueRouter ?

  • 太简陋了吧?
    是的,比较简陋,目前只是练练手,方便实现一些小功能的演示。

你可能感兴趣的:(vue3 做一个后台管理用的轻量级路由 + 菜单)