文档章节

关于动态的添加iview admin路由以及刷新侧边栏按钮

o
 osc_fmg49rzg
发布于 2019/03/20 10:45
字数 601
阅读 17
收藏 0

精选30+云产品,助力企业轻松上云!>>>

最近公司新开了一个基于iview admin2.0的前端项目。

由于为了和原有的CS客户端和网站的菜单保持一致。所以要求菜单统一从数据库中获取。

目前想到的方法是在开始访问时从通过后台从数据库中读取菜单数据。然后添加到菜单中。还不是很完善,不过暂时目的是达到了。记录一下改的方法。

1.把脚手架中原有的路由中用不到的示例那部分删掉。保留login,home,401,500等。(404比较特殊)

2.在api文件夹中添加router.js。添加读取菜单路由的方法

export const getCustomRouters = () => {
  return axios.request({
    url: '',
    method: 'get',
    data: {}
  })
}
View Code
3.在lib/util.js中添加解析菜单数据的的函数。此时再把404页面添加到该已解析完的路由的后面。原因是如果原路由存在404,每次加载刷新时会先进入到404页面。
export const getRouters = routes => {
  let rootRoute = []
  AddRouters(routes, rootRoute)
  rootRoute.push({
    path: '*',
    name: 'error_404',
    meta: {
      hideInMenu: true
    },
    component: () => import('@/view/error-page/404.vue')
  })
  return rootRoute
}
const AddRouters = (routes, rootRoute) => {
  routes.forEach(element => {
    let path = '' + element.f_id
    let title = '' + element.f_title
    let access = [element.f_function]
    // judeg node type to generate components
    let component = {}
    if (element.f_type == 1) {
      if (element.parent_id == 0) {
        path = '/' + path
        component = Main
      } else {
        component = parentView
      }
    } else {
      if (
        element.component_reflect != '' &&
        element.component_reflect != undefined
      ) {
        component = () => import('@/view/' + element.component_reflect)
      }
    }

    // add node to route tree
    let thisNode = {
      path: path,
      name: title,
      component: component,
      meta: {
        title: title,
        // hideInBread: false,
        // hideInMenu:false,
        // notCache:false,
        access: access,
        icon: '_qq'
        // beforeCloseName:''
      },
      children: []
      // redirect: to => {},
      // alias: '',
      // props: {}
    }
    if (element.children != undefined && element.children.length > 0) {
      AddRouters(element.children, thisNode.children)
    }
    rootRoute.push(thisNode)
  })
}
View Code

4.但是发现单纯的添加路由,侧边栏并不会响应路由的改变而变化,所以我想到的方法是更改状态管理。在/store/module/app.js中添加menuRouters状态,初始值为引入的路由routers,这样能保证侧边栏刷新。并将getters中的menuList函数修改如下

menuList: (state, getters, rootState) =>
      getMenuByRouter(state.menuRouters, rootState.doc.access),
    errorCount: state => state.errorList.length
View Code

mutations中添加updateRouter函数

    updateRouter (state, route) {
      // state.menuRouters.append
      // alert(route)
      route.forEach(function (value, key, arr) {
        state.menuRouters.push(value)
      })
      // alert(state.menuRouters)
    }
View Code

5.在main.js的中引入上述函数并在mounted函数中调用

mounted() {
    // 调用方法,动态生成路由

    getCustomRouters()
      .then(res => {
        let secondRouter = res.data.children
        let addRouters = getRouters(secondRouter)
        router.addRoutes(addRouters)
        store.commit('updateRouter', addRouters)
      })
      .catch(err => {})

  }
View Code

存在的问题:刷新页面时会回到home页(原先会回到当前页),估计需要在对状态管理和路由跳转部分进行更改后面研究吧。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue+iview 动态路由和权限验证

github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新。为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习。 ...

osc_02y9c31o
2018/04/14
7
0
iView Admin 2.1.0 发布,后台集成解决方案

iView admin 2.0.0 版本在经历 9 个测试版本的开发维护后,现已发布正式版,版本号也来到了 v2.1.0 。 以往版本发行记录: https://github.com/iview/iview-admin/releases iView admin 是基...

王练
2018/11/04
4.2K
3
iView Admin 2.3.0 发布,后台集成解决方案

iView Admin 2.3.0 已发布,更新如下: 新增ABackTop组件,支持自定义指定滚动容器 853f3d3 新增clipboard全局指令,实现一键复制 8552ce1 添加config/index.js配置项,可配置显示在标签栏的...

王练
2018/11/26
9K
5
iView Admin 2.4.0 发布,后台集成解决方案

iView Admin 2.4.0 已发布,更新如下: 新增组织结构树页面 e78f77f 新增可拖动抽屉组件 DragDrawer 11209b0 iView admin 是基于 Vue.js ,搭配使用 iView UI 组件库形成的一套后台集成解决方...

王练
2018/12/22
3.1K
1
iView admin 2.0.0 beta8 发布,后台集成解决方案

iView admin 2.0.0 beta8 已发布,更新内容如下: 优化首页,改为响应式布局 e885e77 优化面包屑导航,首页也可显示图标 7b89fca 未开启多语言时不显示切换语言下拉菜单 65a4d4b 修复自定义指...

王练
2018/10/12
3K
1

没有更多内容

加载失败,请刷新页面

加载更多

强制行家更新 - Force maven update

问题: I imported my working project on other computer so it started to download dependencies. 我将工作项目导入其他计算机,因此它开始下载依赖项。 Apparently in the meantime my ......

javail
54分钟前
13
0
skywalking实现分布式系统链路追踪

一、背景 随着微服务的越来越流行,我们服务之间的调用关系就显得越来越复杂,我们急需一个APM工具来分析系统中存在的各种性能指标问题以及调用关系。目前主流的APM工具有CAT、Zipkin、Pinpo...

燚-焱
今天
16
0
2020最新的Spring Boot 分布式锁的具体实现(内附代码)

前言 面试总是会被问到有没有用过分布式锁、redis 锁,大部分读者平时很少接触到,所以只能很无奈的回答 “没有”。本文通过 Spring Boot 整合 redisson 来实现分布式锁,并结合 demo 测试结...

北柠Java
今天
28
0
Shiro中获取Cookie

自定义shiro的SessionIdCookie 在使用shiro的时候,曾经有段时间很苦恼,因为我cookie的sessionId经常无故被改,然后抛There is no session with id [xxxx]的异常。我们知道,当请求过来,s...

豫华商
今天
14
0
JPA和Hibernate有什么区别? [关闭] - What's the difference between JPA and Hibernate? [closed]

问题: I understand that JPA 2 is a specification and Hibernate is a tool for ORM. 我知道JPA 2是一个规范,而Hibernate是ORM的工具。 Also, I understand that Hibernate has more fea......

富含淀粉
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部