[已实现] iview-admin动态加载路由修改方法 · Issue #1158 · iview/iview-admin · GitHub

标签: | 发表时间:2019-07-10 18:03 | 作者:
出处:https://github.com

本示例基于iview-admin的template分支修改,其他分支应该也是支持的,通过mock方式模拟后台数据,将mock数据更改为自己的后端数据格式,转换方法稍加修改即可

@/mock/login.js中增加数据

直接将@router/routers.js中,home节点到404节点之间的数据 __剪切 __过去即可

export const getUserMenus = req => {
  return [
    // 粘贴到这里就可以了
    // 需要把所有的component: () => import('@/view/**/*.vue')
    // 修改为component: 'view/**/*.vue'
    // 注意main和parent-view
    {
      path: '',
      name: 'doc',
      meta: {
        title: '文档',
        href: 'https://lison16.github.io/iview-admin-doc/#/',
        icon: 'ios-book'
      }
    },
    {
      path: '/multilevel',
      name: 'multilevel',
      meta: {
        icon: 'md-menu',
        title: '多级菜单'
      },
      component: 'components/main',
      children: [
        {
          path: 'level_2_1',
          name: 'level_2_1',
          meta: {
            icon: 'md-funnel',
            title: '二级-1'
          },
          component: 'view/multilevel/level-2-1.vue'
        },
        {
          path: 'level_2_2',
          name: 'level_2_2',
          meta: {
            access: ['super_admin'],
            icon: 'md-funnel',
            showAlways: true,
            title: '二级-2'
          },
          component: 'components/parent-view',
          children: [
            {
              path: 'level_2_2_1',
              name: 'level_2_2_1',
              meta: {
                icon: 'md-funnel',
                title: '三级'
              },
              component: 'view/multilevel/level-2-2/level-3-1.vue'
            }
          ]
        },
        {
          path: 'level_2_3',
          name: 'level_2_3',
          meta: {
            icon: 'md-funnel',
            title: '二级-3'
          },
          component: 'view/multilevel/level-2-3.vue'
        }
      ]
    }
  ]
}

@/mock/index.js中增加解析

Mock.mock(/\/get_user_menus/, getUserMenus)

@/api/user.js中增加方法

export const listUserMenus = () => {
  return axios.request({
    url: 'get_user_menus',
    method: 'get'
  })
}

@/libs/utils.js中添加后端数据转换成路由的工具函数

/**
 * @description 将后端菜单树转换为路由树
 * @param {Array} menus
 * @returns {Array}
 */
export const backendMenusToRouters = (menus) => {
  let routers = []
  forEach(menus, (menu) => {
    // 将后端数据转换成路由数据
    let route = backendMenuToRoute(menu)
    // 如果后端数据有下级,则递归处理下级
    if (menu.children && menu.children.length !== 0) {
      route.children = backendMenusToRouters(menu.children)
    }
    routers.push(route)
  })
  return routers
}

/**
 * @description 将后端菜单转换为路由
 * @param {Object} menu
 * @returns {Object}
 */
const backendMenuToRoute = (menu) => {
  // 具体内容根据自己的数据结构来定,这里需要注意的一点是
  // 原先routers写法是component: () => import('@/view/error-page/404.vue')
  // 经过json数据转换,这里会丢失,所以需要按照上面提过的做转换,下面只写了核心点,其他自行处理
  let route = Object.assign({}, menu)
  route.component = () => import(`@/${menu.component}`)
  return route
}

@/store/module/app.js中做如下修改,只标注新增和修改的内容

export default {
  state: {
    routers: [],
    hasGetRouter: false
  },
  getters: {
    menuList: (state) => (state, getters, rootState) => getMenuByRouter(state.routers, rootState.user.access),
  },
  mutations: {
    setRouters (state, routers) {
      state.routers = routers
    },
    setHasGetRouter (state, status) {
      state.hasGetRouter = status
    }
  },
  actions: {
    getRouters ({ commit }) {
      return new Promise((resolve, reject) => {
        try {
          listUserMenus().then(res => {
            let routers = backendMenusToRouters(res.data)
            commit('setRouters', routers)
            commit('setHasGetRouter', true)
            resolve(routers)
          }).catch(err => {
            reject(err)
          })
        } catch (error) {
          reject(error)
        }
      })
    }
  }
}

@/router/index.js中,修改turnTo函数和beforeEach钩子里面最后一个else中的代码

const turnTo = (to, access, next) => {
  if (canTurnTo(to.name, access, store.state.app.routers.concat(routes))) next() // 有权限,可访问
  else next({ replace: true, name: 'error_401' }) // 无权限,重定向到401页面
}


// 修改这部分代码
if (store.state.user.hasGetInfo && store.state.app.hasGetRouter) {
  turnTo(to, store.state.user.access, next)
} else {
  // 加载用户信息
  store.dispatch('getUserInfo').then(user => {
    // 加载用户菜单
    store.dispatch('getRouters').then(routers => {
      // commonRoutes需要追加到路由解析最后的404,把原先的routers.js中的404删掉即可
      router.addRoutes(routers.concat([
        {
          path: '*',
          name: 'error_404',
          meta: {
            hideInMenu: true
          },
          component: () => import('@/view/error-page/404.vue')
        }
      ]))
      next({ ...to })
    })
  }).catch(() => {
    setToken('')
    next({ name: 'login' })
  })
}

@/components/main/components/user/user.vue中,处理注销问题

需要修改注销的代码,注销成功后跳转到登录页面,这样可以起到强制刷新的作用,清空缓存的routers

logout () {
  this.handleLogOut().then(() => {
    window.location = '/login'
  })

相关 [iview admin 动态加载] 推荐:

[已实现] iview-admin动态加载路由修改方法 · Issue #1158 · iview/iview-admin · GitHub

- -
本示例基于iview-admin的template分支修改,其他分支应该也是支持的,通过mock方式模拟后台数据,将mock数据更改为自己的后端数据格式,转换方法稍加修改即可. @/mock/login.js中增加数据. 直接将@router/routers.js中,home节点到404节点之间的数据 __剪切 __过去即可.

vue iview-admin 如何兼容IE浏览器(通用) - Gas_station的博客 - CSDN博客

- -
对于ie我们没有做过多的兼容处理,如果使用者需要兼容ie,可以install babel-polyfill,然后在main.js上面加载这个包即可. 安装babel-polyfill `npm install babel-polyfill --save` 2. src/main.js 引入babel-polyfill `import '@babel/polyfill` 3.

动态加载HQL

- senyo - BlogJava-首页技术区
Java代码如下:(ReloadableDynamicHibernate.java). 135         private Map qlMap;                //查询的映射. 这样就实现了每次修改SQL or HQL语句后不用重启服务器,立刻看到结果,加快了开发速度.

java动态加载

- - Java - 编程语言 - ITeye博客
第一部分:Java虚拟机启动时,关于类加载方面的一些动作. 当使用java ProgramName.class运行程序时,Java找到JRE,接着找到jvm.dll,把该动态库载入内存,这就是JVM. 然后加载其它动态库, 并激活JVM. JVM激活之后会进行一些初始化工作,之后生成BootstrapLoader,该Class Loader是由C++写的.

优秀的响应式 jQuery 滑块插件 – iView Slider

- - 博客园_梦想天空
  iView Slider 是一款优秀的 jQuery 滑动插件,用于实现文本、图片、视频等各种网页内容的滑动功能. iView Slider 支持响应式布局,能够很好的运行于触屏设备中. iView Slider 内置35种很炫的过渡效果(Transition Effects),能够帮助你制作出各种各样的滑动效果.

无刷新动态加载数据,滚动条加载

- - CSDN博客Web前端推荐文章
无刷新动态加载数据,滚动条加载.  滚屏加载更多数据,适合评论等页面. 本例的数据库很简单,一看就明了.     var winH = $(window).height(); //页面可视区域高度  .         var scrollT = $(window).scrollTop(); //滚动条top  .

美团Android DEX自动拆包及动态加载简介

- - 美团技术团队
作为一个android开发者,在开发应用时,随着业务规模发展到一定程度,不断地加入新功能、添加新的类库,代码在急剧的膨胀,相应的apk包的大小也急剧增加, 那么终有一天,你会不幸遇到这个错误:. 生成的apk在android 2.3或之前的机器上无法安装,提示INSTALL_FAILED_DEXOPT.

Android 动态加载技术三个关键问题详解

- - 移动开发 - ITeye博客
关注微信号:javalearns   随时随地学Java. 动态加载技术(也叫插件化技术)在技术驱动型的公司中扮演着相当重要的角色,当项目越来越庞大的时候,需要通过插件化来减轻应用的内存和CPU占用,还可以实现热插拔,即在不发布新版本的情况下更新某些模块. 动态加载是一项很复杂的技术,这里主要介绍动态加载技术中的三个基础性问题,至于完整的动态加载技术的实现请参考笔者发起的开源插件化框架DL:.

Apache工具类动态加载资源文件

- - 编程语言 - ITeye博客
    利用Apache的commons-configuration-1.6.jar 工具类可以实现动态加载XMl,Properties文件,加载原理后续补上. //休息10秒后重新加载配置文件.    src/resource/config.xml的路内容是:. 李四. 已有 0 人发表留言,猛击->> 这里<<-参与讨论.

Android 使用动态加载框架DL进行插件化开发

- - CSDN博客移动开发推荐文章
如有转载,请声明出处: 时之沙:  http://blog.csdn.net/t12x3456    (来自时之沙的csdn博客).         随着应用的不断迭代,应用的体积不断增大,项目越来越臃肿,冗余增加.项目新功能的添加,无法确定与用户匹配性,发生严重异常往往牵一发而动全身,只能紧急发布补丁版本,强制用户进行更新.结果频繁的更新,反而容易降低用户使用黏性.或者是公司业务的不断发展,同系的应用越来越多,传统方式需要通过用户量最大的主项目进行引导下载并安装..