关于vue-admin-element中的动态加载路由

 更新时间:2022年08月13日 09:51:03   作者:Hero_rong  
这篇文章主要介绍了关于vue-admin-element的动态加载路由,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

先看一下 vue-admin-element 的目录,对于新手来说,看明白项目的目录很重要,这些目录都是自动生成的

1. 思路

我们要动态生成路由,就得有接口,从接口里面获取路由信息,然后把这些信息动态添加到路由上展示出来就ok了,仔细看一下这些数据,不难发现,里面有 component 组件,这组件后台是没有办法传过来的,需要前端自己转换,下面会详细提到

2. 后台第一个页面就是登录页面

登录页面是自带的且固定的,所以我们就在登录的时候调用接口,这样登录进去之后就直接看到左侧菜单了,下面在登录页面请求的接口,我们把拿到的数据存到 session 里面,这是为了刷新数据不丢失,可以看到这里面有个 menu 方法,这个方法就是 1. 里面说的,转化 component 组件的方法

import { menu } from '@/utils/menu'   //调用转化组件的方法
authPowerIndexAjax().then(response => {  //调用真实的后台的接口
  let data = response.data.hasMenuList;
  sessionStorage.setItem('hasMenuList',JSON.stringify(data));
  sessionStorage.setItem('test',JSON.stringify(menu(data)))
  this.$router.addRoutes(menu(data));  //动态添加路由
  let that = this
  that.$router.push({path: '/manager/online-class-children'}) //每次退出重新登陆之后,都回到首页
  this.loading = false
})

3. 转化 component 组件

这是我们后端传来数据,每个项目数据不一样,所以大家重点看红色框框圈起来的地方就好了,其他的仅供参考

    if (item.menu_url.length == 0) {
      item.path = '/'+index
      item.component = () => import('@/layout')
      item.meta = {
        title:item.name
      }
    } else {
      item.path = item.menu_url
      let str = item.menu_url
      item.component = () => import(`@/views${str}.vue`)
      item.meta = {
        title:item.name
      }
    }

4. 刚刚上文提到的,防止刷新菜单就消失的问题

在 main.js 加一段代码就行了,这样子就大功告成了

// 动态添加路由
if (sessionStorage.getItem('hasMenuList') != null) {
  sessionStorage.setItem('test',JSON.stringify(menu(b)))
  router.addRoutes(menu(b));
}

5. 菜单栏(侧边栏)显示

上述步骤都完成后,菜单栏也就是侧边栏是不会显示的,我们需要把数据放到侧边栏里面,其他的都不动,就把 routes 数据换成我们缓存里的数据就行了

return JSON.parse(sessionStorage.getItem('test'))

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3如何在SCSS中使用v-bind

    Vue3如何在SCSS中使用v-bind

    这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Vue如何根据id在数组中取出数据

    Vue如何根据id在数组中取出数据

    这篇文章主要介绍了Vue如何根据id在数组中取出数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue监听dom大小改变案例

    vue监听dom大小改变案例

    这篇文章主要介绍了vue监听dom大小改变案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue 移动端记录页面浏览位置的方法

    vue 移动端记录页面浏览位置的方法

    这篇文章主要介绍了vue 移动端记录页面浏览位置的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 对vue 键盘回车事件的实例讲解

    对vue 键盘回车事件的实例讲解

    今天小编就为大家分享一篇对vue 键盘回车事件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue路由传参刷新后数据丢失问题及解决

    vue路由传参刷新后数据丢失问题及解决

    这篇文章主要介绍了vue路由传参刷新后数据丢失问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 一文搞懂VueJs中customRef函数使用

    一文搞懂VueJs中customRef函数使用

    这篇文章主要为大家介绍了VueJs中customRef函数使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    这篇文章主要介绍了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能,结合实例形式详细分析了Vue + Node.js + MongoDB基于图片上传组件实现图片预览和删除功能相关操作技巧,需要的朋友可以参考下
    2020-04-04
  • 通过Element ui往页面上加一个分页导航条的方法

    通过Element ui往页面上加一个分页导航条的方法

    这篇文章主要介绍了通过Element ui往页面上加一个分页导航条的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue2.0 兄弟组件(平级)通讯的实现代码

    vue2.0 兄弟组件(平级)通讯的实现代码

    这篇文章主要介绍了vue2.0 兄弟组件(平级)通讯的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01

最新评论