位置: 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应用程序(使用微软必应需要哪些条件)

  • 企业微博营销的8种常见模式(企业微博营销的日常运营工作三部分)

    企业微博营销的8种常见模式(企业微博营销的日常运营工作三部分)

  • 华为电视投屏功能怎么使用(华为电视投屏功能怎么放大屏幕)

    华为电视投屏功能怎么使用(华为电视投屏功能怎么放大屏幕)

  • steam账户名称怎么设置才合格(steam账户名称怎么输入不了)

    steam账户名称怎么设置才合格(steam账户名称怎么输入不了)

  • 探探的活跃度准不准(探探的活跃度是什么意思)

    探探的活跃度准不准(探探的活跃度是什么意思)

  • 抖音注销了头像会变成红色吗(抖音注销了头像会马上变吗)

    抖音注销了头像会变成红色吗(抖音注销了头像会马上变吗)

  • 小米路由器dns异常怎么修复(小米路由器dns异常怎么解决)

    小米路由器dns异常怎么修复(小米路由器dns异常怎么解决)

  • 电脑视频通话对方听不到我声音怎么办

    电脑视频通话对方听不到我声音怎么办

  • 苹果打siri叫旁白死机怎么弄(苹果叫siri怎么没反应)

    苹果打siri叫旁白死机怎么弄(苹果叫siri怎么没反应)

  • 抖音有的作品合拍不了(抖音的作品合集怎么弄)

    抖音有的作品合拍不了(抖音的作品合集怎么弄)

  • 手机里应用宝是干嘛的(应用宝是哪里的)

    手机里应用宝是干嘛的(应用宝是哪里的)

  • 微信扫一扫加好友记录怎么查(微信扫一扫加好友多久过期)

    微信扫一扫加好友记录怎么查(微信扫一扫加好友多久过期)

  • 拼多多换货运费哪方出(拼多多换货运费谁承担)

    拼多多换货运费哪方出(拼多多换货运费谁承担)

  • vivo储存空间权限在哪打开(vivox7存储权限)

    vivo储存空间权限在哪打开(vivox7存储权限)

  • 如何在word中建立目录(如何在word中建立坐标系)

    如何在word中建立目录(如何在word中建立坐标系)

  • 钉钉中的抄送人是什么(钉钉的抄送人怎么删除)

    钉钉中的抄送人是什么(钉钉的抄送人怎么删除)

  • iphonex电话录音在哪(iphonex接电话录音)

    iphonex电话录音在哪(iphonex接电话录音)

  • 华为自带记账在哪里(华为自带的记账)

    华为自带记账在哪里(华为自带的记账)

  • 12123申诉改手机要多久呢(12123手机更改申诉多久有结果)

    12123申诉改手机要多久呢(12123手机更改申诉多久有结果)

  • oppoa5时间显示主屏幕(oppoa57时间显示主屏幕)

    oppoa5时间显示主屏幕(oppoa57时间显示主屏幕)

  • 华为手机微信自动退出是怎么回事(华为手机微信自动计算)

    华为手机微信自动退出是怎么回事(华为手机微信自动计算)

  • 手机播放视频怎么连接电视(手机播放视频怎么投屏到电脑上)

    手机播放视频怎么连接电视(手机播放视频怎么投屏到电脑上)

  • vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案(vue的iframe)

    vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案(vue的iframe)

  • 在一个JS文件中引用另一个JS文件中的变量(在一个js文件中怎么写)

    在一个JS文件中引用另一个JS文件中的变量(在一个js文件中怎么写)

  • 增值税普票没有章
  • 个人所得税个体户减半
  • 作废的增值税普通发票还可以重新开吗?
  • 个税扣除项生效日期
  • 微型企业政府补贴政策
  • 小规模纳税人季度申报
  • 意外伤害险进项税转出
  • 代开增值税票普票专票税点一样吗
  • 企业如何加强存货管理工作
  • 增值税专用发票怎么开
  • 购进货物建不动产进项税额抵扣
  • 工程项目因故终止施工的建设单位应办理手续0
  • 2020年减免水利基金会计分录
  • 代开专票作废退税怎么做账?
  • 持有至到期投资核算内容
  • 只占股不出资
  • 建筑企业如何进行资质申请?
  • 差旅费补助计入什么科目
  • 小规模印花税减免性质代码和项目名称
  • 公司开设食堂需要哪些手续
  • 酒店水电费分录
  • 支付境外服务费税务如何处理
  • 事业单位是否属于中小企业
  • 一次性收取的租金怎么纳税
  • 预收账款税收政策
  • word如何修改正文字体
  • 偶然所得怎么缴纳个人所得税免税
  • 工程施工怎么结转到成本里
  • 专项资金单独核算的法律依据是什么
  • 民办非企业单位是私立还是公立
  • 增值税发票是不是可以抵税
  • 高新技术企业改革
  • CENTOS7安装报错
  • 苹果手机密码忘记了怎么重置密码
  • 招待费审批流程
  • 如何使用dashboard
  • 职工薪酬可能计入什么科目
  • 委托代销商品两种方式会计分录
  • framework 4 client profile
  • 浅析是什么意思
  • 商业银行流动性风险监管指标
  • php获取长度
  • 牛客前端刷题怎么样
  • 增值税进项税额能不能抵扣
  • 折扣销售增值税计算例题
  • 工伤保险赔偿范围和企业承担范围
  • 公司抽奖奖品怎么做账
  • 怎么实现宏的功能
  • RedHat6.5/CentOS6.5安装Mysql5.7.20的教程详解
  • mongodb部署安装
  • 计提以前年度的企业所得税
  • 政府补助的相关法律法规
  • 金蝶迷你版怎么打印明细账
  • 资产减值损失属于什么科目
  • 外贸企业 生产企业
  • 个人所得税专项扣除2023最新政策
  • 跨年的房租费用怎么做账
  • mysql查询时间段的交集数据
  • 合伙企业可以退出吗
  • 事业单位职工福利费
  • 日常费用报销表格
  • 软件租赁费入什么账户
  • 发票抬头是个人税号怎么填
  • sqlsever导入数据时出现ole db连接数据无效
  • win10改win8.1
  • windows 进程管理
  • fedora最新版
  • reg注册表格式文件
  • ubuntu上安装qt
  • win7怎么隐藏软件
  • mysql如何添加外键
  • win8 控制面板
  • js domcontentloaded
  • shell循环遍历目录
  • python遍历文本的每条数据
  • 理解JavaScript事件对象
  • 销售车位需要交房产税吗
  • 深圳微信税务局登录不了
  • 消费税申报详细操作流程
  • 下载安徽税务app并安装
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设