vue2动态路由实现

实现一个简单的动态路由:

1、先定义菜单页面组件的结构,使用的是elementUI的NavMenu 导航菜单

<template><div><el-menu default-active="1" router><el-submenu :index="item.path" v-for="item in menu_data" router><template slot="title"><i :class="item.meta.icon"></i>{{ item.meta.title }}</template><el-menu-item :index="childItem.path" v-for="childItem in item.children" :key="childItem.name">{{ childItem.meta.title }}</el-menu-item></el-submenu></el-menu></div>
</template><script>
export default {data () {return {menu_data: [{name: '定时任务管理',icon: 'location',path: '/home/robotManage',child: [{name: '机器人管理',path: '/home/robotManage',},{name: '定时任务管理',path: '/home/timerTask',},],},{name: '资源管理',icon: 'github',path: '/home/robotPerson',child: [{name: '个人资源',path: '/home/robotPerson',},{name: '部门资源',path: '/home/robotPart',},{name: '公开资源',path: '/home/robotOpen',},],},{name: '考勤组管理',icon: 'laptop',path: 'home/department',child: [{name: '部门考勤管理',path: '/home/department',},{name: '考勤组管理',path: '/home/group',},],},],}
}
</script>
效果:

2、路由部分的代码,定义需要的路由,router中index.js。

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入路由组件
import robotManage from '@/views/robotManage'
import timerTask from '@/views/timerTask'
import getmsg from '@/views/getmsg'
import login from '@/components/login.vue'
import home from '@/views/home.vue'
import robotPerson from '@/views/robotPerson.vue'
import robotPart from '@/views/robotPart.vue'
import robotOpen from '@/views/robotOpen'
import group from '@/views/group'
import department from '@/views/department'// 配置路由
export  default new VueRouter({// 路由routes: [// 登录{path: '/',name: 'login',component: login,},// home{path: '/home',name: 'home',component: home,children: [// 机器人管理{path: '/home/robotManage',name: 'robotManage',component: robotManage,},// 时间管理{path: '/home/timerTask',name: 'timerTask',component: timerTask},// 收集简书地址链接{path: '/home/getmsg',name: 'getmsg',component: getmsg},// 机器人个人问答页面{path: '/home/robotPerson',name: 'robotPerson',component: robotPerson},// 机器人部门问答页面{path: '/home/robotPart',name: 'robotPart',component: robotPart},// 机器人公开问答页面{path: '/home/robotOpen',name: 'robotOpen',component: robotOpen},{path: '/home/group',  // 路由参数component: group, // 对应的页面组件},{path: '/home/department',component: department},]},],
})

3、定义store,在state中增加属性menu_data

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)export default new Vuex.Store({state: {menu_data: []},mutations: {setMenuData (state, data) {state.menu_data = data}}
})

4、在router路由中使用前置路由守卫beforeEach获取数据,并且提交到store。

在前置路由守卫中,用用户动态路由接口,拿到后台传递过来的该用户的菜单权限数据,把原来定义的menu_data数据换成该用户的菜单权限数据。

这一步是在router中发起用户动态路由请求,并且把获取到的用户的菜单权限数据提交到store

// 前置路由守卫:to是要进入的目标路由对象,from是当前导航正在离开的路由,next函数用于放行或跳转路由
router.beforeEach((to, from, next) => {// 首先放行路由next()// 然后发起请求reqGetRouter().then((res) => {// 用于触发一个 mutation从而实现state状态更新,// 第一个参数是mutations中定义的方法名,第二个为需要传递的数据store.commit('setMenuData', res.data)console.log(store.state.menu_data, '前置路由守卫调用接口后获取的状态')}).catch((error) => {console.error('请求路由数据失败:', error)})
})

5、data里面的属性menu_data不能直接返回了,需通过computed来返回,并且返回的值是从store里面获取的

computed:{menu_data:{get(){return this.$store.state.menu_data}}
}

6、完整代码

<template><el-menu default-active="1" router><el-submenu :index="item.path" v-for="item in menu_data" router><template slot="title"><i :class="item.meta.icon"></i>{{ item.meta.title }}</template><el-menu-item :index="childItem.path" v-for="childItem in item.children" :key="childItem.name">{{ childItem.meta.title }}</el-menu-item></el-submenu></el-menu>
</template><script>
export default {computed: {menu_data: {get () {return this.$store.state.menu_data}}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/26367.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

借助大语言模型快速学习金仓数据库 KES

基础概念 KES 人大金仓数据库管理系统 KingbaseES&#xff08;KES&#xff09; 是由 北京人大金仓信息技术股份有限公司 (以下简称“人大金仓”)自主研发的面向全行业、全客户关键应用的企业级大型通用数据库管理系统。产品融合了人大金仓在数据库领域几十年的产品研发和企业级…

ai智能机器人让呼叫中心工作更轻松

AI智能机器人在呼叫中心工作中确实能带来许多优势&#xff0c;使工作更轻松和高效&#xff1a; 自动化处理&#xff1a;AI机器人可以自动处理大量的呼叫任务&#xff0c;减轻人工的重复性工作负担&#xff0c;节省时间和成本。 快速响应&#xff1a;机器人能够立即响应客户的呼…

TiKV 源码分析之 PointGet

作者&#xff1a;来自 vivo 互联网存储研发团队-Guo Xiang 本文介绍了TiDB中最基本的PointGet算子在存储层TiKV中的执行流程。 一、背景介绍 TiDB是一款具有HTAP能力(同时支持在线事务处理与在线分析处理 )的融合型分布式数据库产品&#xff0c;具备水平扩容或者缩容等重要特…

Python写UI自动化--playwright(安装)

Playwright是微软推出的开源自动化测试工具&#xff0c;专为跨浏览器端到端测试设计。Playwright可以在多个浏览器引擎上运行测试&#xff0c;包括基于Chromium的浏览器&#xff08;如Chrome、Edge&#xff09;、Firefox和WebKit&#xff08;Safari的技术基础&#xff09;。支持…

标星好多好多k,这2个开源项目绝了!

在这个信息爆炸的世代&#xff0c;不妨让我给大家精选并介绍一些优质的开源项目&#xff0c;让大家感受到开源世界的美好。 我的数据我做主 每个人的微信聊天记录里都藏着无数珍贵的回忆和秘密。如果有一个宝盒&#xff0c;能够帮你把这些记忆永久保存&#xff0c;甚至让它们活…

PyTorch 统计属性-Tensor基本操作

最小 min, 最大 max, 均值 mean&#xff0c;累加 sum&#xff0c;累乘 prod … >>> a torch.arange(0,8).view(2,4).float() >>> a tensor([[0., 1., 2., 3.],[4., 5., 6., 7.]])>>> a.min() ## 最小值&#xff1a;tensor(0.) >>> a.ma…

新加坡裸机云多IP服务器为何适合跨境外贸业务

新加坡裸机云多IP服务器在跨境外贸业务中展现出了卓越的适配性&#xff0c;其独特优势为外贸企业提供了强大的支持。以下将详细阐述为何新加坡裸机云多IP服务器是跨境外贸业务的理想选择。 首先&#xff0c;新加坡裸机云多IP服务器在性能上表现出色。由于去除了虚拟化层的开销&…

聊聊JetCacheProxyConfiguration

序 本文主要研究一下JetCacheProxyConfiguration JetCacheProxyConfiguration com/alicp/jetcache/anno/config/JetCacheProxyConfiguration.java Configuration public class JetCacheProxyConfiguration implements ImportAware, ApplicationContextAware {protected Ann…

大数据在商业中的应用——Kompas.ai如何助力企业决策

引言 在现代商业中&#xff0c;大数据逐渐成为企业决策的重要工具。通过对海量数据的分析和处理&#xff0c;企业可以获得重要的市场信息和决策支持。本文将探讨大数据在商业中的应用&#xff0c;并介绍Kompas.ai如何通过AI技术助力企业决策。 大数据的发展及其重要性 大数据…

为什么要学习Flink系统管理及优化课程?

Flink系统是一种流式处理框架&#xff0c;能够高效地处理大规模数据流。然而&#xff0c;要确保Flink系统的正常运行&#xff0c;就需要进行系统管理和优化。系统管理是指对Flink集群的监控、调度和维护&#xff0c;而系统优化则是指通过调整参数和优化算法&#xff0c;提高Fli…

Anime Girls Pack

动漫女孩包 35个动画&#xff08;就地&#xff09;支持人形。 8情绪。 角色列表&#xff1a;原艾艾琪惠美子惠理文子星薰和子佳子奈子理子凛老师小樱老师津雨僵尸女孩01 下载&#xff1a;​​Unity资源商店链接资源下载链接 效果图&#xff1a;

[vue2]深入理解路由

本节目标 单页应用程序路由概念VueRouter基本使用组件分类存放路由模块封装声明式导航其他路由配置路由模式编程式导航案例-面经基础版 单页应用程序 单页应用程序(SPA): 所有的功能都在一个HTML页面上实现 网易云音乐: 网易云音乐 多页应用程序(MPA): 不同功能通过切换不同…

Kotlin 协程真的轻量吗?

前言 在官方文档的介绍中,提到了: 协程是轻量的 并给出了一个例子: fun main() = runBlocking {repeat(50_000) {// 启动大量的协程launch {delay

计算机网络之网络层知识总结

网络层功能概述 主要任务 主要任务是把分组从源端传到目的端&#xff0c;为分组交换网上的不同主机提供通信服务。网络层传输单位是数据报。 分组和数据报的关系&#xff1a;把数据报进行切割之后&#xff0c;就是分组。 主要功能&#xff1a; 路由选择与分组转发 路由器…

JS中的export与Node中的exports

一、JS 中的 export 在 JavaScript ES6 中&#xff0c;export 与 export default 均可用于导出常量、函数、文件、模块等。 export、export default 负责 导出&#xff0c;import 则负责导入。 export 在一个js文件中可以有多个&#xff0c;export default 最多只能有一个。 ex…

网络安全相关的密码学

网络安全相关的密码学是一个复杂且重要的领域&#xff0c;它涵盖了信息的加密、解密、认证以及密钥管理等多个方面。以下是对网络安全相关密码学的详细概述&#xff1a; 一、密码学概述 密码学是研究编制密码和破译密码的技术科学。它研究密码变化的客观规律&#xff0c;应用…

5-1RT-Thread互斥量

5-1RT-Thread互斥量 互斥量斥量的管理方式 互斥量 互斥量又称为互斥型信号量&#xff0c;是一种特殊的二值信号量。以超市的储物柜为例&#xff0c;当用户A存入物品并关闭柜门&#xff0c;则用户A就获得了此格柜子的使用权。此时其他用户无法使用此个柜子&#xff0c;只有当用户…

vue3中用setup写的数据,不能动态渲染(非响应式)解决办法

相比于2.0&#xff0c;vue3.0在新增了一个setup函数&#xff0c;我们在setup中可以写数据也可以写方法&#xff0c;就像我们以前最开始学习js一样&#xff0c;在js文件中写代码。 For instance <template><div class"person"><h2>姓名&#xff1…

Elasticsearch-通过分析器进行分词

在Elasticsearch中&#xff0c;分析器&#xff08;Analyzer&#xff09;是用于将文本转换为可搜索的术语&#xff08;tokens&#xff09;的组件。这个过程通常被称为分词&#xff08;Tokenization&#xff09;。Elasticsearch使用分析器来处理文本字段&#xff0c;以便进行索引…

C语言题目:排序问题2

题目描述 将十个数进行从大到小的顺序进行排列 输入格式 十个整数 输出格式 以从大到小的顺序输出这个十个数 样例输入 1 2 3 4 5 6 7 8 9 10样例输出 10 9 8 7 6 5 4 3 2 1 代码解析 1. 引入头文件 代码首先引入了stdio.h头文件&#xff0c;这是C语言标准输入输出库…