添加动态(菜单)路由

src/mock/index.js

@@ -8,7 +8,7 @@ import * as config from './modules/config'
import * as oss from './modules/oss'
import * as schedule from './modules/schedule'
console.log('\n%c!<-------------------- 接口拦截, mock模拟数据 s -------------------->', 'color:red')
console.log('\n%c!<-------------------- 接口拦截, mock模拟数据 s -------------------->', 'color:blue')
// tips
// 1. 关闭[业务模块集]拦截, create方法[第2个参数]设置. (默认开启)
@@ -23,4 +23,4 @@ create(config, false)      // 参数管理
create(oss, false)         // 文件服务
create(schedule, false)    // 定时任务
console.log('%c!<-------------------- 接口拦截, mock模拟数据 e -------------------->\n', 'color:red')
console.log('%c!<-------------------- 接口拦截, mock模拟数据 e -------------------->\n\n', 'color:blue')

src/router/index.js

@@ -1,9 +1,11 @@
// 路由定义使用说明:
// 1. 代码中路由统一使用name属性跳转.
// 2. 开放path属性用做简短路由, 比如: '/a1', 访问地址: www.renren.io/#/a1
/**
 * 全站路由配置
 *
 * 建议:
 * 1. 代码中路由统一使用name属性跳转(不使用path属性)
 */
import Vue from 'vue'
import Router from 'vue-router'
import { currentRouteIsDefault, addMenuListRoutes } from './utils'
import http from '@/utils/http'
Vue.use(Router)
@@ -11,52 +13,45 @@ Vue.use(Router)
// 开发环境不使用懒加载, 因为懒加载页面太多的话会造成webpack热更新太慢, 所以只有开发环境使用懒加载
const _import = require('./import-' + process.env.NODE_ENV)
// 全局路由(无需嵌套上左右整体布局)
const globalRoutes = [
  { path: '/404', component: _import('common/404'), name: '404', desc: '404未找到' },
  { path: '/login', component: _import('common/login'), name: 'login', desc: '登录' }
]
// 主入口路由(需嵌套上左右整体布局)
const mainRoutes = {
  path: '/',
  component: _import('main'),
  name: 'main',
  redirect: { name: 'home' },
  desc: '主入口整体布局',
  children: [
    { path: '/home', component: _import('common/home'), name: 'home', desc: '首页' },
    { path: '/theme', component: _import('common/theme'), name: 'theme', desc: '主题' }
  ],
  beforeEnter (to, from, next) {
    let token = Vue.cookie.get('token')
    if (!token || !/\S/.test(token)) {
      next({ name: 'login' })
    }
    next()
  }
}
const router = new Router({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),
  isAddMenuListRoutes: false,
  routes: [
    { path: '/404', component: _import('error/404'), name: '404', desc: '404未找到' },
    { path: '/login', component: _import('login/index'), name: 'login', desc: '登录' },
    {
      path: '/',
      component: _import('main'),
      name: 'main',
      redirect: { name: 'home' },
      desc: '主入口整体布局',
      children: [
        { path: '/home', component: _import('home/index'), name: 'home', desc: '首页' },
        { path: '/theme', component: _import('theme/index'), name: 'theme', desc: '主题' }
        // { path: '/schedule', component: _import('modules/schedule/index'), name: 'schedule', desc: '定时任务', meta: { isTab: true } },
        // { path: '/oss', component: _import('modules/oss/index'), name: 'oss', desc: '文件上传', meta: { isTab: true } },
        // { path: '/config', component: _import('modules/config/index'), name: 'config', desc: '参数管理', meta: { isTab: true } },
        // { path: '/log', component: _import('modules/log/index'), name: 'log', desc: '系统日志', meta: { isTab: true } },
        // { path: '/menu', component: _import('modules/menu/index'), name: 'menu', desc: '菜单管理', meta: { isTab: true } },
        // { path: '/role', component: _import('modules/role/index'), name: 'role', desc: '角色管理', meta: { isTab: true } },
        // { path: '/user', component: _import('modules/user/index'), name: 'user', desc: '管理员管理', meta: { isTab: true } }
      ],
      beforeEnter (to, from, next) {
        let token = Vue.cookie.get('token')
        if (!token || !/\S/.test(token)) {
          next({ name: 'login' })
        }
        next()
      }
    }
    // { path: '*', redirect: { name: '404' } }
  ]
  isAddDynamicRoutes: false, // 是否已经添加动态(菜单)路由
  routes: globalRoutes.concat(mainRoutes)
})
console.log(router)
router.beforeEach((to, from, next) => {
  console.log(router.options.isAddMenuListRoutes)
  if (router.options.isAddMenuListRoutes || currentRouteIsDefault(to, router.options.routes.filter(item => item.path !== '/'))) {
  // 添加动态(菜单)路由
  // 1. 已经添加 or 全局路由, 直接访问
  // 2. 获取菜单列表, 添加并保存本地存储
  if (router.options.isAddDynamicRoutes || fnCurrentRouteType(to) === 'global') {
    next()
  } else if (sessionStorage.getItem('menuList')) {
    router.addRoutes(addMenuListRoutes(JSON.parse(sessionStorage.getItem('menuList'))))
    router.options.isAddMenuListRoutes = true
    next({ ...to, replace: true })
  } else {
    http({
      url: http.adornUrl('/sys/menu/nav'),
@@ -64,8 +59,8 @@ router.beforeEach((to, from, next) => {
      params: http.adornParams()
    }).then(({data}) => {
      if (data && data.code === 0) {
        router.addRoutes(addMenuListRoutes(data.menuList))
        router.options.isAddMenuListRoutes = true
        fnAddDynamicRoutes(data.menuList)
        router.options.isAddDynamicRoutes = true
        sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
        sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
      } else {
@@ -77,4 +72,67 @@ router.beforeEach((to, from, next) => {
  }
})
/**
 * 判断当前路由类型, global: 全局路由, main: 主入口路由
 * @param {*} route 当前路由
 */
function fnCurrentRouteType (route) {
  var temp = []
  for (var i = 0; i < globalRoutes.length; i++) {
    if (route.path === globalRoutes[i].path) {
      return 'global'
    } else if (globalRoutes[i].children && globalRoutes[i].children.length >= 1) {
      temp = temp.concat(globalRoutes[i].children)
    }
  }
  return temp.length >= 1 ? fnCurrentRouteType(route, temp) : 'main'
}
/**
 * 添加动态(菜单)路由
 * @param {*} menuList 菜单列表
 * @param {*} routes 递归创建的动态(菜单)路由
 */
function fnAddDynamicRoutes (menuList = [], routes = []) {
  var temp = []
  for (var i = 0; i < menuList.length; i++) {
    if (menuList[i].list && menuList[i].list.length >= 1) {
      temp = temp.concat(menuList[i].list)
    } else if (/\S/.test(menuList[i].url)) {
      var route = {
        path: menuList[i].url.replace('/', '-'),
        component: null,
        name: menuList[i].url.replace('/', '-'),
        desc: menuList[i].name,
        meta: { menuId: menuList[i].menuId, isTab: true }
      }
      // url以http[s]?开头, 通过iframe展示
      if (/^http[s]?:\/\/.*/.test(menuList[i].url)) {
        route['path'] = `i-${menuList[i].menuId}`
        route['name'] = `i-${menuList[i].menuId}`
        route['meta']['isIframe'] = true
      } else {
        try {
          route['component'] = _import(`modules/${menuList[i].url}`) || null
        } catch (e) {}
      }
      routes.push(route)
    }
  }
  if (temp.length >= 1) {
    fnAddDynamicRoutes(temp, routes)
  } else {
    mainRoutes.name = 'main-dynamic'
    mainRoutes.children = routes
    router.addRoutes([
      mainRoutes,
      { path: '*', redirect: { name: '404' } }
    ])
    sessionStorage.setItem('dynamicRoutes', JSON.stringify(mainRoutes.children || '[]'))
    console.log('\n%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue')
    console.log(mainRoutes.children)
    console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->\n\n', 'color:blue')
  }
}
export default router

src/router/utils.js

@@ -1,67 +0,0 @@
import Vue from 'vue'
const _import = require('./import-' + process.env.NODE_ENV)
/**
 * 判断当前路由是否为默认路由
 * true: 默认路由, false: 动态菜单路由
 * @param {*} currentRoute
 * @param {*} defaultRouteList
 */
export function currentRouteIsDefault (currentRoute, defaultRouteList) {
  var temp = []
  for (var i = 0; i < defaultRouteList.length; i++) {
    if (currentRoute.path === defaultRouteList[i].path) {
      return true
    } else if (defaultRouteList[i].children && defaultRouteList[i].children.length >= 1) {
      temp = temp.concat(defaultRouteList[i].children)
    }
  }
  return temp.length >= 1 ? currentRouteIsDefault(currentRoute, temp) : false
}
/**
 * 添加动态菜单路由
 * @param {*} menuList
 */
export function addMenuListRoutes (menuList = [], routes = []) {
  var temp = []
  var tempRouteName = ''
  for (var i = 0; i < menuList.length; i++) {
    if (menuList[i].list && menuList[i].list.length >= 1) {
      temp = temp.concat(menuList[i].list)
    } else {
      tempRouteName = getRouteNameByUrl(menuList[i].url)
      if (/\S/.test(tempRouteName) && tempRouteName !== 'sql') {
        routes.push({
          path: tempRouteName,
          component: _import(`modules/${tempRouteName}/index`),
          name: tempRouteName,
          desc: tempRouteName,
          meta: { isTab: true }
        })
      }
    }
  }
  return temp.length >= 1 ? addMenuListRoutes(temp, routes) : [
    {
      path: '/',
      component: _import('main'),
      redirect: { name: 'home' },
      desc: '主入口整体布局',
      children: routes,
      beforeEnter (to, from, next) {
        let token = Vue.cookie.get('token')
        if (!token || !/\S/.test(token)) {
          next({ name: 'login' })
        }
        next()
      }
    },
    { path: '*', redirect: { name: '404' } }
  ]
}
function getRouteNameByUrl (url) {
  let val = /.*\/(.*)\.html/.exec(url)
  return val && val.length >= 1 ? val[1] : ''
}

src/utils/index.js

@@ -6,15 +6,6 @@ export function isAuth (key) {
  return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
}
/**
 * 获取路由名称, 根据url地址
 * @param {*} url
 */
export function getRouteNameByUrl (url) {
  let val = /.*\/(.*)\.html/.exec(url)
  return val && val.length >= 1 ? val[1] : ''
}
/**
 * 树形数据转换
 * @param {*} data

src/views/main-sidebar-sub-menu.vue

@@ -1,8 +1,5 @@
<template>
  <el-submenu
    v-if="menu.list && menu.list.length >= 1"
    :data-idx="menu.menuId + ''"
    :index="menu.menuId + ''">
  <el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''">
    <template slot="title">
      <icon-svg :name="menu.icon" class="site-sidebar__menu-icon"></icon-svg>
      <span>{{ menu.name }}</span>
@@ -10,14 +7,11 @@
    <sub-menu
      v-for="item in menu.list" 
      :key="item.menuId"
      :menu="item">
      :menu="item"
      :dynamicRoutes="dynamicRoutes">
    </sub-menu>
  </el-submenu>
  <el-menu-item
    v-else
    :index="menu.menuId + ''"
    :data-idx="menu.menuId + ''"
    @click="gotoRouteHandle(menu.url)">
  <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
    <icon-svg :name="menu.icon" class="site-sidebar__menu-icon"></icon-svg>
    <span>{{ menu.name }}</span>
  </el-menu-item>
@@ -25,22 +19,27 @@
<script>
  import SubMenu from './main-sidebar-sub-menu'
  import { getRouteNameByUrl } from '@/utils'
  export default {
    name: 'sub-menu',
    props: {
      menu: Object,
      required: true
      menu: {
        type: Object,
        required: true
      },
      dynamicRoutes: {
        type: Array,
        required: true
      }
    },
    components: {
      SubMenu
    },
    methods: {
      // 跳转到菜单对应路由
      gotoRouteHandle (url) {
        var routeName = getRouteNameByUrl(url)
        if (/\S/.test(routeName)) {
          this.$router.push({ name: routeName })
      // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
      gotoRouteHandle (menu) {
        var route = this.dynamicRoutes.filter(item => item.meta.menuId === menu.menuId)
        if (route.length >= 1) {
          this.$router.push({ name: route[0].name })
        }
      }
    }

src/views/main-sidebar.vue

@@ -13,7 +13,8 @@
        <sub-menu
          v-for="menu in menuList" 
          :key="menu.menuId"
          :menu="menu">
          :menu="menu"
          :dynamicRoutes="dynamicRoutes">
        </sub-menu>
      </el-menu>
    </div>
@@ -22,11 +23,11 @@
<script>
  import SubMenu from './main-sidebar-sub-menu'
  import { getRouteNameByUrl } from '@/utils'
  import isEmpty from 'lodash/isEmpty'
  export default {
    data () {
      return {
        dynamicRoutes: []
      }
    },
    components: {
@@ -65,33 +66,8 @@
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created () {
      this.getMenuList().then(() => {
        this.routeHandle(this.$route)
      })
    },
    methods: {
      // 获取菜单列表 / 权限
      getMenuList () {
        return this.$http({
          url: this.$http.adornUrl('/sys/menu/nav'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.menuList = data.menuList
            sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
          } else {
            this.menuList = []
            sessionStorage.setItem('permissions', '[]')
          }
        })
      },
      // 路由操作
      routeHandle (route) {
        if (route.meta && route.meta.isTab) {
      '$route' (route) {
        if (route.meta.isTab) {
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          // tab不存在, 先添加
          if (isEmpty(tab)) {
@@ -112,14 +88,20 @@
          this.menuActiveName = tab.id + ''
          this.mainTabsActiveName = route.name
        }
      },
      }
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicRoutes = JSON.parse(sessionStorage.getItem('dynamicRoutes') || '[]')
    },
    methods: {
      // 获取菜单, 根据路由名称
      getMenuByRouteName (name, menuList) {
        var temp = []
        for (var i = 0; i < menuList.length; i++) {
          if (menuList[i].list && menuList[i].list.length >= 1) {
            temp = temp.concat(menuList[i].list)
          } else if (getRouteNameByUrl(menuList[i].url) === name) {
          } else if (menuList[i].url === name) {
            return menuList[i]
          }
        }

src/views/modules/schedule/index.vue

@@ -105,8 +105,8 @@
</template>
<script>
  import AddOrUpdate from './add-or-update'
  import Log from './log'
  import AddOrUpdate from './schedule-add-or-update'
  import Log from './schedule-log'
  export default {
    data () {
      return {

src/views/modules/oss/index.vue

@@ -67,8 +67,8 @@
</template>
<script>
  import Config from './config'
  import Upload from './upload'
  import Config from './oss-config'
  import Upload from './oss-upload'
  export default {
    data () {
      return {

src/views/modules/config/index.vue

@@ -74,7 +74,7 @@
</template>
<script>
  import AddOrUpdate from './add-or-update'
  import AddOrUpdate from './config-add-or-update'
  export default {
    data () {
      return {

src/views/modules/menu/index.vue

@@ -90,7 +90,7 @@
<script>
  import TableTreeColumn from '@/components/table-tree-column'
  import AddOrUpdate from './add-or-update'
  import AddOrUpdate from './menu-add-or-update'
  import { treeDataTranslate } from '@/utils'
  export default {
    data () {

src/views/modules/role/index.vue

@@ -75,7 +75,7 @@
</template>
<script>
  import AddOrUpdate from './add-or-update'
  import AddOrUpdate from './role-add-or-update'
  export default {
    data () {
      return {

src/views/modules/user/index.vue

@@ -91,7 +91,7 @@
</template>
<script>
  import AddOrUpdate from './add-or-update'
  import AddOrUpdate from './user-add-or-update'
  export default {
    data () {
      return {