婚庆微信小程序开发_基于iview

2021-01-07

基于iview-admin实现动态路由的示例代码       这篇文章主要介绍了基于iview-admin实现动态路由的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

是一个基于vue和iview组件库实现的管理后台前端,本文基于iview-admin最新版本,实现基于权限的动态路由加载。

本文代码可参见:

背景:

动态路由:vue的路由,可通过new Router传入路由数组定义实现,也可以通过router.addRoutes实现。通过router.addRoutes动态传入路由定义的方式,称之为动态路由。路由数据可以全部保存在后台数据库中,也可以将路由配置在前端,后端返回给前端路由权限信息,然后匹配过滤,进行加载。本文就这两种方式分别进行介绍,并且给出实现参考。

目标:

基于iview-admin,实现两种不同的路由动态加载方式:

路由(导航菜单)数据全部存储在后台 路由数据配置在前端,后台只存储权限信息

注意:本文通过Mock模拟后端接口

方式1:路由(导航菜单)数据全部存储在后台

定义路由数据结构体,在文件中:src/mock/data.js

export const routersData = [{
 path: '/pet',//访问路径
 name: 'Pet',//路由的名字,这个与i18n有关,需要唯一
 meta: {
 title: '宠物',//标题
 hideInMenu: false,//是否在左侧导航菜单隐藏
 icon: 'logo-freebsd-devil'//图标
 component: 'components/main',//组件文件路径,不需要Import
 children: [{//嵌套路由
 path: 'cat',
 name: 'Cat',
 meta: {
 title: '猫咪',
 hideInMenu: false,
 icon: 'ios-cloudy-night'
 component: 'view/pet/cat/Cat.vue'
 }, {
 path: 'dog',
 name: 'Dog',
 meta: {
 hideInMenu: false,
 title: '狗娃',
 icon: 'ios-color-filter'
 component: 'view/pet/dog/Dog.vue'
 }, {
 path: 'pig',
 name: 'Pig',
 meta: {
 hideInMenu: false,
 title: '猪啊',
 icon: 'ios-contact'
 component: 'view/pet/pig/Pig.vue',
 children: [
 path: 'female',
 name: 'Female',
 meta: {
 hideInMenu: false,
 title: '母猪',
 icon: 'ios-contact'
 component: 'view/pet/pig/Pig.vue',
 path: 'male',
 name: 'Male',
 meta: {
 hideInMenu: false,
 title: '公猪',
 icon: 'ios-contact'
 component: 'view/pet/pig/Pig.vue',
 }]}]

暴露ajax调用接口:src/mock/index.js,中增加:

Mock.mock(/\/sys\/routers/, routersData)

实现一个ajax调用:src/api/routers.js中增加:

 export const getRouterReq = (access) = {
 return axios.request({
 url: '/sys/routers',
 params: {
 access
 method: 'get'
 })}

1、在store中定义动态路由相关逻辑,修改:src/store/module/app.js

引入ajax请求:

import {getRouterReq} from '@/api/routers'

定义两个state,如下

state: {
 .....
 routers: [],//拿到的路由数据
 hasGetRouter: false//是否已经拿过路由数据

同步增加mutations:

 mutations:{
 ......
 //设置路由数据
 setRouters(state, routers) {
 state.routers = routers
 //设置是否已经拿过路由
 setHasGetRouter(state, status) {
 state.hasGetRouter = status
 }......}

增加一个action:

action:{
........
 getRouters({commit}) {
 return new Promise((resolve, reject) = {
 try {
 getRouterReq().then(res = {
 let routers = backendMenusToRouters(res.data)
 commit('setRouters', routers)
 commit('setHasGetRouter', true)
 resolve(routers)
 }).catch(err = {
 reject(err)
 } catch (error) {
 reject(error)
 ........

此处用到了一个函数:backendMenusToRouters,这个函数定义在src/libs/util.js中,用来对后端返回的路由数据递归处理,行程vue的路由。

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

修改src/router/index.js,增加动态路由加入逻辑,主要方法:

 const initRouters = (store) = {
 //这个人登录了已经
 if (store.state.user.hasGetInfo) {
 //路由加载过了
 if (store.state.app.hasGetRouter store.state.app.routers store.state.app.routers.length 0) {
 console.log("已经加载过了路由")
 } else {
 //加载路由
 console.log("开始加载路由权限...")
 store.dispatch('getUserMenus').then(routers = {
 //此处routers已经是按照权限过滤后的路由了,没权限的,不加入路由,无法访问
 //路由重置一下把404放最后
 const newRouter = new Router({
 routes,
 mode: config.routerModel
 router.matcher = newRouter.matcher;
 //把404加最后面,如果用router.push({name:'xxxx'})这种的话,404页面可能空白,用path:'/aa/bb'
 router.addRoutes(routers.concat([{
 path: '*',
 name: 'error_404',
 meta: {
 hideInMenu: true
 component: () = import(/* webpackChunkName: "404" */'@/view/error-page/404.vue')
 }]))
 }).finally(() = {

每次路由加载之前,都会判断是否已经初始化过系统路由,如果没有,则初始化。

至此,动态路由基本实现。文章可能有遗漏和不足,欢迎探讨。第二种实现方式

具体实现,请参见:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866