位置: IT常识 - 正文

vue实现动态路由添加(简单无废话版本)(vue动态路由是什么)

编辑:rootadmin
vue实现动态路由添加(简单无废话版本)

推荐整理分享vue实现动态路由添加(简单无废话版本)(vue动态路由是什么),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue动态路由与静态路由的区别,vue实现动态路由菜单,vue动态路由传参,vue动态路由三种方法,vue实现动态路由跳转,vue实现动态路由的方法,vue实现动态路由跳转,vue实现动态路由菜单,内容如对您有帮助,希望把文章链接给更多的朋友!

最近练习vue的项目,有关于后台管理系统的动态添加路由部分,根据思路实现了基本的功能,在这里记录一下,等后面学习后在进行优化。

这里只是记录我个人最后实现的思路,本人由于是初学者,可能思路和代码有不正确地方,还求多见谅。也请能不吝赐教,一同进步。

一 . 封装一个处理生产路由的函数vue实现动态路由添加(简单无废话版本)(vue动态路由是什么)

我们可以封装一个函数,这个函数专门用来帮助我们生产最后添加到路由中的路由对象。

//map-menu.js //动态添加路由const modules = import.meta.glob('../views/*/*.vue') //vite中获取组件文件的方法export function mapMenu(navList) {//navList 传入后台接口返回的路由列表 //最终动态添加路由返回数组 const routerList = [] for (const key of navList) { routerList.push({ path: `/${key.nUrl.split('/')[2]}`, name: `${key.nUrl.split('/')[2].toUpperCase()}`, component: modules[`..${key.nUrl}`] }) } return routerList}

注意:这里需要大家自己根据自己需要的情况进行处理,因为后端接口传递过来的数据不同,所以你需要根据情况将path,name,component这三个获取出来并最终转换成你需要的。

二. vuex中进行调用

我们封装好了一个函数,接下来我们就需要调用来帮助我们动态生产路由,但是有一个问题来了,我们需要何时来进行动态生成路由。 这里我个人理解是:1.在用户进行登录后进行动态生产路由,将用户的菜单生成出来,并保存起来。 2. 就是在页面刷新时候我们也需要动态生成路由,因为刷新页面路由会刷新,不再次进行动态生成就是丢失,这里我们可以和对vuex初始化一起进行。

// vuex中的user.js模块//动态添加路由import { mapMenu } from '@/util/map-menu.js' //前面封装的函数 state: { userNav: [] }, mutations: { changeUserNav(state, userNav) { state.userNav = userNav //动态添加路由 mapMenu(userNav).forEach((route) => { router.addRoute(route)//动态添加路由 }) } }, actions: { async requestUserNav({ commit }) { const navList = await getRolesNavRequest() commit('changeUserNav', navList) cache.setCache('jxcms-userNav', navList) }}

这样我们就定义好了,只需要调用store.dispatch('requestUserNav') 就可以动态生成路由。另外,因为vue-router4.0中将 router.addRoutes方法废除了,所以我们只能使用 router.addRoute 循环添加所有的路由。

三,最终完成动态添加路由

前面我们说过了,我们动态添加路由的时机就是二个,初始化和登录时候,所以我们现在就完成最后的部分。

// vuex中的user.js模块//动态添加路由import { mapMenu } from '@/util/map-menu.js' //前面封装的函数 state: { ... }, mutations: { ... }, actions: { async loginUser({ dispatch, commit }, info) { const loginRes = await loginUser(info) if (loginRes.uName) { if (!cache.getCache('jxcms-token')) { ElMessage({ message: '登录成功!', type: 'success' }) } commit('changeUser', loginRes) //本地存储 cache.setCache('jxcms-user', loginRes) dispatch('requestUserNav')//执行动态生成路由 router.push('/roles') cache.setCache('jxcms-token', loginRes.token) } else { ElMessage({ message: '登录失败', type: 'error' }) } }}

这里我们完成第一个动态添加路由的时机,登录成功时候,进行动态路由添加。

// vuex中的根模块 index.js actions: { initializationData({ dispatch, commit }) {//vuex初始化函数 const navList = cache.getCache('jxcms-userNav') commit('changeUserNav', navList)//动态生成路由 //要用同步的 const user = cache.getCache('jxcms-user') commit('changeUser', user) } }, modules: { user, nav, dept, roles }// main.js//初始化store.dispatch('initializationData')

这里我们完成了动态生成路由的第二个时机:刷新页面时,初始化时候进行动态路由生成. 因为刷新页面时候用户可能是登录状态,这样我们就不能通过登录成功来触发动态路由添加,就需要我们主动进行动态路由生成,在初始化时候,获取到本地存储的菜单信息,如果用户没有登录,本地的菜单信息会被清除。 另外,这里我使用的是commit来提交mutations,而不是actions函数,这是因为我在测试过程中发现,如果我使用actions,那么我在进入路由页面前,路由并没有创建成功,会报错,而使用mutations,因为是同步的,所以不会出现这个情况。这个问题后面如果找到解决办法,会重新进行修改。

本文链接地址:https://www.jiuchutong.com/zhishi/300833.html 转载请保留说明!

上一篇:Three.js教程:材质效果(three.js 入门)

下一篇:使用微软新必应(New Bing)AI机器人生成树莓派Pico W开发板MicroPython应用程序(使用微软必应需要哪些条件)

  •  推广中最不应该有的小手段(在推广过程中,哪些操作方式会让效果优化适得其反?)

    推广中最不应该有的小手段(在推广过程中,哪些操作方式会让效果优化适得其反?)

  • 红米k30屏幕120hz可以调吗(红米k30屏幕亮度多少尼特)

    红米k30屏幕120hz可以调吗(红米k30屏幕亮度多少尼特)

  • 手机微信怎么换微信头像(手机微信怎么换铃声)

    手机微信怎么换微信头像(手机微信怎么换铃声)

  • 误删的抖音评论怎么恢复(抖音评论删除了怎么找回)

    误删的抖音评论怎么恢复(抖音评论删除了怎么找回)

  • 如何让对方短信显示发送失败(如何让对方短信和微信发不出去)

    如何让对方短信显示发送失败(如何让对方短信和微信发不出去)

  • 通过小米订单号怎样查询物流(通过小米订单号查手机号)

    通过小米订单号怎样查询物流(通过小米订单号查手机号)

  • z390带m和不带m的区别(z390有m2接口吗)

    z390带m和不带m的区别(z390有m2接口吗)

  • 微信太久没登录登录不上怎么办(微信太久没登录期间部分信息没有了)

    微信太久没登录登录不上怎么办(微信太久没登录期间部分信息没有了)

  • 苹果手机侧面那个小按键是什么(苹果手机侧面那个静音键作用)

    苹果手机侧面那个小按键是什么(苹果手机侧面那个静音键作用)

  • 淘宝开店每个月要交钱吗(淘宝开店每个月都要交保证金吗)

    淘宝开店每个月要交钱吗(淘宝开店每个月都要交保证金吗)

  • 电脑怎么黑屏快捷键(电脑怎么黑屏快捷键设置)

    电脑怎么黑屏快捷键(电脑怎么黑屏快捷键设置)

  • 开视频对方忙线中是什么意思(开视频对方忙线中对方会有提示吗?)

    开视频对方忙线中是什么意思(开视频对方忙线中对方会有提示吗?)

  • a11相当于骁龙多少(二代骁龙7+什么水平)

    a11相当于骁龙多少(二代骁龙7+什么水平)

  • 钢化膜为什么会有斜纹(钢化膜为什么会翘边)

    钢化膜为什么会有斜纹(钢化膜为什么会翘边)

  • 手机开发者模式怎么关闭(手机开发者模式在哪里找)

    手机开发者模式怎么关闭(手机开发者模式在哪里找)

  • 笔记本电脑怎么锁屏幕(笔记本电脑怎么选择配置才好)

    笔记本电脑怎么锁屏幕(笔记本电脑怎么选择配置才好)

  • qq怎么设置自定义分组(qq怎么设置自定义主题背景)

    qq怎么设置自定义分组(qq怎么设置自定义主题背景)

  • 苹果手表一直显示充电状态开不了机怎么办(苹果手表一直显示导航信息怎么关闭)

    苹果手表一直显示充电状态开不了机怎么办(苹果手表一直显示导航信息怎么关闭)

  • 抖音dou投放6小时还是12小时(抖音dou投放6小时后还会推吗)

    抖音dou投放6小时还是12小时(抖音dou投放6小时后还会推吗)

  • word字间距怎么调整(word字间距怎么设置在哪里)

    word字间距怎么调整(word字间距怎么设置在哪里)

  • 美团单车和摩拜通用吗(美团单车和摩拜单车一样吗)

    美团单车和摩拜通用吗(美团单车和摩拜单车一样吗)

  • 安卓手机强制格式化(安卓手机强制格式化步骤)

    安卓手机强制格式化(安卓手机强制格式化步骤)

  • 抖音怎么隐藏通讯录好友(抖音怎么隐藏通讯录好友名字)

    抖音怎么隐藏通讯录好友(抖音怎么隐藏通讯录好友名字)

  • 咸鱼拒收后可以退款吗(咸鱼拒收可以申请退货退款吗)

    咸鱼拒收后可以退款吗(咸鱼拒收可以申请退货退款吗)

  • 抖音播放量有什么用(抖音播放量有什么套路)

    抖音播放量有什么用(抖音播放量有什么套路)

  • 华为p30pro几个摄像头(华为p30pro几个摄像头干嘛用)

    华为p30pro几个摄像头(华为p30pro几个摄像头干嘛用)

  • a1602是第几代airpods(型号a1602是第几代)

    a1602是第几代airpods(型号a1602是第几代)

  • 炫龙DD3笔记本怎么安装win7系统 利用U盘安装win7图文教程(炫龙dd3笔记本怎么样)

    炫龙DD3笔记本怎么安装win7系统 利用U盘安装win7图文教程(炫龙dd3笔记本怎么样)

  • 残疾人个人所得税减免怎么计算
  • 酒类的包装物押金可以单独核算吗
  • 企业所得税是什么意思
  • 业务招待费报销要求
  • 上传附报资料在哪下载
  • 成本占收入比重分析
  • 税务发票上的二维码
  • 经营活动现金流增加的原因
  • 其他业务利润怎么算公式
  • 长期挂账应付款的审计
  • 劳动局仲裁支付的补偿怎么做账?
  • 记账凭证一定要签字吗
  • 生产企业出口货物收不到款怎么处理
  • 6月份税务新政热点问题有哪些?
  • 公司个人所得税怎么申报
  • 企业代扣代缴个人所得税系统
  • 小规模未开票收入要交增值税吗
  • 国家减免税额怎么入账
  • 增值税税额计入什么科目?
  • 全额抵免的计算
  • 商贸流通企业的构成
  • 鸿蒙壁纸怎么设置滚动
  • mac如何配置
  • 关于销售免税品的规定
  • 劳务费要申报个税吗怎么申报
  • win10网页打不开但是有网
  • 没有实际出资的股东怎么退出
  • 增值税专用发票上注明的价款含税吗
  • 生育津贴差额账务处理
  • vue调用同一个组件
  • node.js环境搭建
  • 专票抵扣联可以盖两个章吗
  • php教程 ftp 函数
  • 房产置换怎么做账务处理
  • 应交增值税进项税额月底怎么处理
  • 增值税进项税额计算公式
  • 自产产品对外赠送的会计处理方法
  • 税审报告什么时候出
  • 建筑业总包增值税
  • 股权转让协议受让方应注意
  • 被投资企业清算,长期股权投资处理
  • java操作mongodb数据库
  • 所有小规模都能开专票吗
  • 扣非净利润为什么比净利润高
  • 帐外资金
  • 应付账款转收入摘要怎么写
  • 小规模纳税人缴纳增值税的会计科目
  • 高新技术企业认定中介机构
  • 退物业费如何记帐
  • 员工福利开的专票怎么做分录
  • 补办理营业执照需要什么材料
  • 汽车销售公司赠车合法吗
  • 债券溢价什么意思
  • 基金申购费的会计分录
  • 勘察设计费是否可以进入在建工程
  • 跨年的社保,账务怎么处理?
  • 原告起诉被告承担诉讼费
  • 印花税交多了
  • 进项税销项税分录
  • 购买需要安装的生产设备会计分录
  • 废品损失明细账应选择三栏式
  • ubuntu vnc远程
  • windows软件包2012能删吗
  • win7无法打开此文件
  • xp的兼容模式
  • mac进去不了系统
  • xp电脑桌面图片显示缩略图
  • 苹果macmimi
  • win7关闭文件夹和内容一起显示
  • jQuery.parseHTML() 函数详解
  • shell常用命令及功能
  • oculus dk2
  • linux归档文件什么意思
  • Linux 中的各项 CPU 利用率是这样算出来的
  • jqueryui dialog
  • js 三元
  • python抓视频保存本地
  • 社会福利企业可以投资吗
  • 世界第二十八高峰
  • 小规模纳税人的增值税怎么计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设