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

server/2024/12/5 4:00:16/

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({//路由模式hashhistory: 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-itemv-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-itemv-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)
}


http://www.ppmy.cn/server/140517.html

相关文章

AJAX 全面教程:从基础到高级

AJAX 全面教程&#xff1a;从基础到高级 目录 什么是 AJAXAJAX 的工作原理AJAX 的主要对象AJAX 的基本用法AJAX 与 JSONAJAX 的高级用法AJAX 的错误处理AJAX 的性能优化AJAX 的安全性AJAX 的应用场景总结与展望 什么是 AJAX AJAX&#xff08;Asynchronous JavaScript and XML…

Elasticsearch的自定义查询方法到底是啥?

Elasticsearch主要的目的就是查询&#xff0c;默认提供的查询方法是查询全部&#xff0c;不满足我们的需求&#xff0c;可以定义查询方法 自定义查询方法 单条件查询 我们查询的需求&#xff1a;从title中查询所有包含"鼠标"这个分词的商品数据 SELECT * FROM it…

【taro react】 ---- 常用自定义 React Hooks 的实现【六】之类渐入动画效果的轮播

1. 效果 2. 场景 css 效果实现:可以看到效果图中就是一个图片从小到大的切换动画效果,这个效果很简单,使用 css 的 transform 的 scale 来实现图片的从小到大的效果,切换就更加简单了,不管是 opacity 还是 visibility 都可以实现图片的隐藏和显示的切换。React.Children.m…

CAN通信协议 HAL库学习

1.CAN介绍 Controller Area Network,是ISO国际标准化的串行通信协议&#xff0c;为了满足汽车产业的“减少线束的数量”&#xff0c;通过多个LAN,进行大量数据的“高速通信”的需求。 低速CAN,通信协议10~125kbps,总线长度可达1000米 高速CAN,通信速率125kbps~1Mbps,总线长度…

复杂度的讲解

数据结构可以简单理解为在内存中管理数据 它具有速度快 带电存储的特点&#xff08;临时存储&#xff09; 如何衡量一个算法的好坏 因此衡量一个算法的好坏&#xff0c;一般是从时间和空间两个维度来衡量的&#xff0c;即时间复杂度和空间复杂度。 时间复杂度主要衡量一个算…

ONLYOFFICE 文档8.2版本:全面升级,带来更高效的协作编辑体验

文章目录 一、PDF 协作编辑&#xff0c;团队合作更高效二、界面优化&#xff0c;提升用户体验三、针对企业用户推出了以下新功能四、所有编辑器中的更多实用改进五、如何确保团队成员在使用新功能时数据安全六、其他实用改进 引言 随着ONLYOFFICE文档8.2版本的发布&#xff0c;…

【技术改造】前端图标组件库搭建流程

1-1 构建源码bulid.ts import path from node:path; import chalk from chalk; import consola from consola; import { build, type BuildOptions, type Format } from esbuild; import GlobalsPlugin from esbuild-plugin-globals; import { emptyDir, copy } from fs-extra…

MATLAB filtic函数使用详解

MATLAB filtic函数使用详解 文章目录 一、filtic函数输入输出说明二、数值计算例子三、MATLAB验证 提示&#xff1a;以下是本篇文章正文内容&#xff0c;转载请附上链接&#xff01; 一、filtic函数输入输出说明 \;\;\;\;\; filtic函数的调用格式为z filtic(b,a,y,x)。其中 向…