首页 > 其他分享 >vue3中利用路由信息渲染菜单栏

vue3中利用路由信息渲染菜单栏

时间:2024-11-10 17:17:14浏览次数:7  
标签:title import 菜单栏 meta vue3 组件 router 路由

1. 创建路由时将路由信息对象进行抽离

将路由信息对象单独抽离到router/routes.ts文件

关键:利用路由元信息meta,定义3个属性

  1. hidden:控制当前路由是否显示在菜单栏中
  2. title:菜单拦名称
  3. icon:对应菜单名称前面的图标
//对外暴露配置路由(常量路由)
export const constantRout = [
  {
    path: '/screen',
    component: () => import('@/views/screen/index.vue'),
    name: 'Screen',
    meta: {
      hidden: false,
      title: '数据大屏',
      icon: 'Platform',
    },
  },
    {
    path: '/acl',
    component: () => import('@/layout/index.vue'),
    name: 'Acl',
    meta: {
      hidden: false,
      title: '权限管理',
      icon: 'Lock',
    },
    children: [
      {
        path: '/acl/user',
        component: () => import('@/views/acl/user/index.vue'),
        name: 'User',
        meta: {
          hidden: false,
          title: '用户管理',
          icon: 'User',
        },
      },
      {
        path: '/acl/role',
        component: () => import('@/views/acl/role/index.vue'),
        name: 'Role',
        meta: {
          hidden: false,
          title: '角色管理',
          icon: 'UserFilled',
        },
      },
      {
        path: '/acl/permission',
        component: () => import('@/views/acl/permission/index.vue'),
        name: 'Permission',
        meta: {
          hidden: false,
          title: '菜单管理',
          icon: 'Monitor',
        },
      },
    ],
  },
]

router/index.ts文件引入router.ts文件

import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from './routes'
//创建路由器
const router = createRouter({
  //路由模式hash
  history: createWebHashHistory(),
  routes: constantRoute,
  //滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    }
  },
})
export default router

2. 将路由信息对象挂载到pinia仓库中

将路由信息对象挂载到pinia仓库中,是为了数据共享,供组件使用

//引入路由(常量路由)
import { constantRoute } from '../../router/routes'
const useUserStore = defineStore('User', {
  state: (): userState => {
    return {
      token: GET_TOKEN(),
      // 存储路由信息用来遍历生成菜单结构
      menuRoutes: constantRoute, //仓库存储生成菜单需要数组(路由)
    }
  },
}

完成将路由信息挂载到pinia仓库中

3. 在组件中通过路由信息对象渲染菜单

Menu是封装的组件,接收父组件传递的userStore.menuRoutes也就是存放在pinia仓库中的路由信息对象

 <!-- 展示菜单区域 -->
      <el-scrollbar class="scrllbar">
        <el-menu background-color="#001529" text-color="white">
          <!-- 根据路由动态生成菜单 -->
          <Menu :menuList="userStore.menuRoutes"></Menu>
        </el-menu>
      </el-scrollbar>

在子组件Menu中声明接收:

//通过props接收父组件传递的路由组件信息
defineProps(['menuList'])

Menu组件完整写法:

思路:通过路由信息对象中的children属性判断是否有子路由,如果有子路由,则继续判断子路由的个数,从而进行对应的判断处理

<template>
  <!-- 根据路由来遍历左侧菜单展示信息 -->
  <template v-for="(item, index) in menuList" :key="item.path">
    <!-- 没有子路由 -->
    <template v-if="!item.children">
      <el-menu-item
        v-if="!item.meta.hidden"
        :index="item.path"
        @click="goRoute"
      >
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
      </el-menu-item>
    </template>
    <!-- 有子路由但是只有一个 -->
    <template v-else-if="item.children && item.children.length == 1">
      <el-menu-item
        v-if="!item.children[0].meta.hidden"
        :index="item.children[0].path"
        @click="goRoute"
      >
        <template #title>
          <el-icon>
            <component :is="item.children[0].meta.icon"></component>
          </el-icon>
          <span>{{ item.children[0].meta.title }}</span>
        </template>
      </el-menu-item>
    </template>
    <!-- 有子路由且个数大于一个 -->
    <template v-if="item.children && item.children.length > 1">
      <el-sub-menu :index="item.path">
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
        <Menu :menuList="item.children"></Menu>
      </el-sub-menu>
    </template>
  </template>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

//通过props接收父组件传递的路由组件信息
defineProps(['menuList'])
let $router = useRouter()
const goRoute = (vc: any) => {
  //路由跳转
  $router.push(vc.index)
}
</script>
<script lang="ts">
// 当子路由个数大于等于一个时,并且或许子路由还有后代路由时。
// 这里我们使用了递归组件。递归组件需要命名(另外使用一个script标签,vue2格式)。
export default {
  name: 'Menu',
}
</script>
<style scoped lang="scss">
</style>

注意:在Menu组件中使用了Menu(递归组件),递归组件需要命名(另外使用一个script标签,vue2格式)。

export default {
  name: 'Menu',
}

注意:在el-menu-item组件中有一个click方法,对应一个函数,由element提供,会接收一个组件实例参数,并配合useRouter进行路由跳转

const goRoute = (vc: any) => {
  //路由跳转
  $router.push(vc.index)
}

标签:title,import,菜单栏,meta,vue3,组件,router,路由
From: https://blog.csdn.net/weixin_53541596/article/details/143636861

相关文章

  • webpack5 + vue3 从零配置项目
    前言虽然在实际项目当中很少会从0到1配置一个项目,毕竟很多重复工作是没有必要的,脚手架将这些重复性的工作进行了整合,方便开发者使用。也正因如此,导致部分开发者过于依赖脚手架,却不清楚其内部的实现流程,因此通过从0到1去配置和搭建项目可以更好的理解开发中使用的脚......
  • 在vue项目中如何实现权限控制,菜单权限,按钮权限,接口权限,路由权限,操作权限,数据权限如何
    在实际项目开发中,权限管理是一个关键功能,用于控制不同用户对系统资源的访问。权限是对特定资源的访问许可,权限控制的目的是确保用户只能访问到被分配的资源。例如,网站管理员可以对网站数据进行增删改查,而普通用户只能浏览。权限管理的分类根据功能的不同,权限控制可以分为......
  • Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手
    Vue3.5版本中新增的`baseWatch`函数确实让`watch`函数与Vue组件彻底分手。这一变化的主要目的是使`watch`函数的实现与Vue组件及其生命周期解耦,从而使得`watch`函数更加灵活和独立。具体来说,`baseWatch`函数的引入使得开发者可以在不依赖Vue组件的情况下使用`watch`功能,这为......
  • Vue3 - 详细实现将多个文件批量导出为ZIP压缩包格式并下载功能,vue3将文件批量下载打包
    前言Vue2版本,请访问这篇文章。在vue3|nuxt3项目开发中,详解实现把多个文件组合成一个ZIP压缩包格式下载到用户本地,将文件批量下载打包成zip格式并自定义压缩包命名名称,vue3批量下载文件并导出为压缩包的功能,如何将后端返回的二进制文件流打包成zip格式,支持任意文件......
  • vue3组件应用 + 以及组件相关知识应用
    文章目录vue组件化开发一、什么是Vue组件化开发二、组件的创建方式三、组件的数据传递四、组件的生命周期五、组件的插槽(Slot)数据传递的方式实例组件生命周期应用场景插槽应用define相关应用vue组件化开发一、什么是Vue组件化开发概念Vue组件化开发是一种将用......
  • Ensp静态路由配置
    Ensp静态配置详解一、基本概念静态路由 是一种通过手动配置路由表来指导数据包转发的方式。在网络中,管理员需要手动添加路由条目,指定目标网络的下一跳地址。静态路由具有配置简单、资源消耗少、安全性高等优点,但也存在无法动态适应网络变化、维护困难等问题。 eNSP 是华......
  • NETCONF 是由 IETF (Internet Engineering Task Force) 提出的一个标准化协议,目标是
    WindowsNetConf(NetworkConfiguration)是Windows操作系统中用于网络配置管理的框架,通常涉及自动化网络配置、管理网络接口和相关网络设置。它提供了一组API和命令行工具,允许管理员和应用程序配置、查询和管理网络设置。什么:NetConf是Windows中用于网络接口配置的功能,可以......
  • JAVA毕业设计198—基于Java+Springboot+vue3的健身房管理系统(源代码+数据库)
    毕设所有选题:https://blog.csdn.net/2303_76227485/article/details/131104075基于Java+Springboot+vue3的健身房管理系统(源代码+数据库)198一、系统介绍本项目前后端分离(可以改为ssm版本),分为用户、管理员两种角色1、用户:注册、登录、公告、论坛交流、健身课程购买......
  • Vue3+antd实现分页功能
    vue中代码(在对应的地方添加)<a-paginationv-model:current="current":total="total"v-model:page-size="pageSize":showSizeChanger="true"......
  • 第三十四章 Vue路由进阶之声明式导航(导航高亮)
    目录一、导航高亮1.1.基于语法1.2.主要代码 二、声明式导航的两个类名2.1.声明式导航类名匹配方式2.2.声明式导航类名样式自定义 ​2.3.核心代码一、导航高亮1.1.基于语法在Vue中通过VueRouter插件,我们可以非常简单的实现实现导航高亮效果VueRouter提......