AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-04-28 819
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3 的后台管理的项目想要做个菜单的话，一般会使用 VueRouter 设置路由，然后用UI库的菜单组件（比如 el-menu）设置各种属性，然后还需要考虑权限等问题。

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 上面。

<el-menu
    class="el-menu-vertical-demo"
    @select="select"
    background-color="#6c747c"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-sub-menu v-for="(item, index) in group"
      :key="index"
      :index="item.id"
    >
      <template #title>
        <component
          :is="item.icon"
          style="width: 1.5em; height: 1.5em; margin-right: 8px;"
        >
        </component>
        <span>{{item.title}}</span>
      </template>
      <el-menu-item v-for="(key, index) in item.children"
        :key="index"
        :index="key">
        <template #title>
          <component
            :is="routes[key].icon"
            style="width: 1.5em; height: 1.5em; margin-right: 8px;"
          >
          </component>
          {{routes[key].title}}
        </template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>


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


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

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


设计页面布局


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

<el-container>
    <el-aside width="200px">
      <!--菜单-->
      <nf-menu :events="events" />
    </el-aside>
    <el-main>
      <!--二级导航-->
      <component
        :is="getComponent(events.currIndex)"
      >
      </component>
    </el-main>
  </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

<el-tabs
    v-model="currentRoute.key"
    type="card"
  >
    <el-tab-pane
      v-for="key in tabs"
      :key="key"
      :label="routes[key].title"
      :name="key"
    >
     <template #label>
        <span>{{routes[key].title}} &nbsp; 
          <circle-close-filled
            style="width: 1.0em; height: 1.0em; margin-top: 8px;"
            @click.stop="removeTab(key)" />
        </span>
      </template>
      <component :is="routerControl[key]">
      </component>
    </el-tab-pane>
  </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

<el-menu
    ref="domMenu"
    class="el-menu-vertical-demo"
    default-active="1"
    @select="(index) => {$router.currentRoute.key = index}"
    background-color="#6c747c"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-sub-menu v-for="(item, index) in $router.group"
      :key="index"
      :index="item.id"
    >
      <template #title>
        <component
          :is="item.icon"
          style="width: 1.5em; height: 1.5em; margin-right: 8px;"
        >
        </component>
        <span>{{item.title}}</span>
      </template>
      <el-menu-item v-for="(key, index) in item.children"
        :key="index"
        :index="key">
        <template #title>
          <component
            :is="$router.routes[key].icon"
            style="width: 1.5em; height: 1.5em; margin-right: 8px;"
          >
          </component>
          {{$router.routes[key].title}}
        </template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>


封装的不够细致，主要目的是可以偷懒用着方便就好。


不求灵活，只求方便，简单粗暴的实现功能即可。


单页路由视图：router-view

<template>
  <component :is="$router.getComponent()">
  </component>
</template>


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


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

<el-tabs
    v-model="$router.currentRoute.key"
    type="card"
  >
    <el-tab-pane label="桌面" :name="main">
      <component :is="$router.home">
      </component>
    </el-tab-pane>
    <el-tab-pane
      v-for="key in $router.tabs"
      :key="key"
      :label="$router.routes[key].title"
      :name="key"
    >
     <template #label>
        <span>{{$router.routes[key].title}} &nbsp; 
          <circle-close-filled
            style="width: 1.0em; height: 1.0em; margin-top: 8px;"
            @click.stop="$router.removeTab(key)" />
        </span>
      </template>
      <component :is="$router.routerControl[key]">
      </component>
    </el-tab-pane>
  </el-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 里面做页面布局

<el-container>
    <el-aside width="200px">
      <!--菜单-->
      <nf-menu/>
    </el-aside>
    <el-main>
      <el-radio-group v-model="routerKind" size="mini">
        <el-radio-button label="单页"></el-radio-button>
        <el-radio-button label="tabs"></el-radio-button>
      </el-radio-group> 可以切换单页模式、动态tab模式
      <hr>
      <!--路由视图-->
      <router-view v-if="routerKind === '单页'"></router-view>
      <router-view-tabs v-if="routerKind === 'tabs'"></router-view-tabs>
    </el-main>
  </el-container>


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


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


疑问


  • 单层路由够用吗？


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


  • 太简陋了吧？


是的，比较简陋，目前只是练练手，方便实现一些小功能的演示。


文章标签：
JavaScript
容器
关键词：
VUE.js路由
后台管理VUE.js
菜单VUE.js
vue3菜单VUE.js
路由菜单VUE.js
自然框架
目录
相关文章
游客62mqllx53nctc
|
7天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
游客62mqllx53nctc
26 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
CamilleKing
|
4天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
16 7
小宋1021
|
5天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
18 3
CamilleKing
|
4天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
19 1
CamilleKing
|
4天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
21 1
游客zi3qmblbcdexu
|
6天前
|
前端开发 JavaScript
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
游客zi3qmblbcdexu
17 1
大树营养快线
|
7天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念，掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索，你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
大树营养快线
14 2
土木林森
|
8天前
|
JavaScript UED
"Vue实战技巧大揭秘：一招解决路由跳转页面不回顶部难题，让你的单页面应用用户体验飙升！"
【10月更文挑战第23天】在Vue单页面应用中，点击路由跳转时，默认情况下页面不会自动滚动到顶部，这可能影响用户体验。本文通过一个新闻网站的案例，介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法，实现路由跳转时页面自动滚动到顶部的功能，提升用户浏览体验。
土木林森
31 0
我是快乐的嘟嘟
|
8天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
104 63
dufadayang
|
8天前
|
缓存 JavaScript 搜索推荐
Vue SSR（服务端渲染）预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制，实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展，Vue SSR 预渲染技术也将不断完善和创新，以适应不断变化的互联网环境和用户需求。
dufadayang
27 9

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    前端常见Vue2.0面试题
  • 4
    【IntelliJ IDEA】idea支持vue文件，设置对vue的支持
  • 5
    VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据
  • 6
    自制简单的range（Vue）
  • 7
    vue基于 input 实现密码的显示与隐藏功能
  • 8
    Vue $watch监听对象属性，数组内对象属性改变
  • 9
    Chrome插件vue-devtools是如何把VSCode中对应的组件文件打开的
  • 10
    VueJS && ReactJS 如何？听听别人怎么说。
  • 1
    vue如何优化首页加载速度
    83
  • 2
    定时器问题（vue的问题）
    48
  • 3
    vue给table组件添加合计
    147
  • 4
    vue slot是做什么的?
    46
  • 5
    vue中使用v-on监听多个方法
    67
  • 6
    vue中如何点击事件，获取该点击元素
    52
  • 7
    Vue 中的 computed 和 watch 的区别
    91
  • 8
    Vue如何监听键盘事件
    180
  • 9
    vue和ainapp动态获取数据改变背景颜色
    46
  • 10
    Vue3——Router4教程(小满版本)（二）
    180

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 前端开发框架Bootstrap使用教程
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月