动态菜单路由

src/components/sub-menu-nav/index.vue

@@ -1,48 +0,0 @@
<template>
  <el-submenu
    v-if="menuNav.list && menuNav.list.length >= 1"
    :data-idx="menuNav.menuId + ''"
    :index="menuNav.menuId + ''">
    <template slot="title">
      <icon-svg :name="menuNav.icon" class="site-sidebar__menu-icon"></icon-svg>
      <span>{{ menuNav.name }}</span>
    </template>
    <sub-menu-nav
      v-for="item in menuNav.list" 
      :key="item.menuId"
      :menu-nav="item">
    </sub-menu-nav>
  </el-submenu>
  <el-menu-item
    v-else
    :index="menuNav.menuId + ''"
    :data-idx="menuNav.menuId + ''"
    @click="gotoRouteHandle(menuNav.url)">
    <icon-svg :name="menuNav.icon" class="site-sidebar__menu-icon"></icon-svg>
    <span>{{ menuNav.name }}</span>
  </el-menu-item>
</template>
<script>
  import SubMenuNav from '../sub-menu-nav'
  import { getRouteNameByUrl } from '@/utils'
  export default {
    name: 'sub-menu-nav',
    props: {
      menuNav: Object,
      required: true
    },
    components: {
      SubMenuNav
    },
    methods: {
      // 跳转到菜单导航对应路由
      gotoRouteHandle (url) {
        var routeName = getRouteNameByUrl(url)
        if (/\S/.test(routeName)) {
          this.$router.push({ name: routeName })
        }
      }
    }
  }
</script>

src/mock/create.js

@@ -23,7 +23,7 @@ export default function (mods, isOpen = true) {
        console.log('\n')
        // 2种url拦截方式
        Mock.mock(http.adronUrl(mod.url), mod.type, mod.data)
        Mock.mock(http.adornUrl(mod.url), mod.type, mod.data)
        Mock.mock(new RegExp(mod.url, 'g'), mod.type, mod.data)
      }
    }

src/router/index.js

@@ -1,16 +1,20 @@
// 路由定义使用说明:
// 1. 代码中路由统一使用name属性跳转.
// 2. 开放path属性用做简短路由, 比如: '/a1', 访问地址: www.renren.io/#/a1
import Vue from 'vue'
import Router from 'vue-router'
import { currentRouteIsDefault, addMenuListRoutes } from './utils'
import http from '@/utils/http'
Vue.use(Router)
// 开发环境不使用懒加载, 因为懒加载页面太多的话会造成webpack热更新太慢, 所以只有开发环境使用懒加载
const _import = require('./import-' + process.env.NODE_ENV)
Vue.use(Router)
// 路由定义使用说明:
// 1. 代码中路由统一使用name属性跳转.
// 2. 开放path属性用做简短路由, 比如: '/a1', 访问地址: www.renren.io/#/a1
export default new Router({
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: '登录' },
@@ -21,16 +25,15 @@ export default new Router({
      redirect: { name: 'home' },
      desc: '主入口整体布局',
      children: [
        // 通过isTab属性, 设定是否通过tab标签页展示内容
        { 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 } }
        { 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')
@@ -39,7 +42,39 @@ export default new Router({
        }
        next()
      }
    },
    { path: '*', redirect: { name: '404' } }
    }
    // { path: '*', redirect: { name: '404' } }
  ]
})
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 !== '/'))) {
    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'),
      method: 'get',
      params: http.adornParams()
    }).then(({data}) => {
      if (data && data.code === 0) {
        router.addRoutes(addMenuListRoutes(data.menuList))
        router.options.isAddMenuListRoutes = true
        sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
        sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
      } else {
        sessionStorage.setItem('menuList', '[]')
        sessionStorage.setItem('permissions', '[]')
      }
      next({ ...to, replace: true })
    })
  }
})
export default router

src/router/utils.js

@@ -0,0 +1,67 @@
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/views/main-sidebar-sub-menu-nav.vue

@@ -0,0 +1,49 @@
<template>
  <el-submenu
    v-if="menuNav.list && menuNav.list.length >= 1"
    :data-idx="menuNav.menuId + ''"
    :index="menuNav.menuId + ''">
    <template slot="title">
      <icon-svg :name="menuNav.icon" class="site-sidebar__menu-icon"></icon-svg>
      <span>{{ menuNav.name }}</span>
    </template>
    <sub-menu-nav
      v-for="item in menuNav.list" 
      :key="item.menuId"
      :menu-nav="item">
    </sub-menu-nav>
  </el-submenu>
  <el-menu-item
    v-else
    :index="menuNav.menuId + ''"
    :data-idx="menuNav.menuId + ''"
    @click="gotoRouteHandle(menuNav.url)">
    <icon-svg :name="menuNav.icon" class="site-sidebar__menu-icon"></icon-svg>
    <span>{{ menuNav.name }}</span>
  </el-menu-item>
</template>
<script>
  import SubMenuNav from './main-sidebar-sub-menu-nav'
  import { getRouteNameByUrl } from '@/utils'
  export default {
    name: 'sub-menu-nav',
    props: {
      menuNav: Object,
      required: true
    },
    components: {
      SubMenuNav
    },
    methods: {
      // 跳转到菜单导航对应路由
      gotoRouteHandle (url) {
        console.log(url)
        var routeName = getRouteNameByUrl(url)
        if (/\S/.test(routeName)) {
          this.$router.push({ name: routeName })
        }
      }
    }
  }
</script>

src/views/main-sidebar.vue

@@ -21,7 +21,7 @@
</template>
<script>
  import SubMenuNav from '@/components/sub-menu-nav'
  import SubMenuNav from './main-sidebar-sub-menu-nav'
  import { mapMutations } from 'vuex'
  import { getRouteNameByUrl } from '@/utils'
  import isEmpty from 'lodash/isEmpty'