动态菜单路由完成

src/main.js

@@ -9,7 +9,7 @@ import '@/element-ui'
import '@/icons'
import '@/assets/scss/index.scss'
import http from '@/utils/http'
import httpRequest from '@/utils/httpRequest'
import { isAuth } from '@/utils'
Vue.use(VueCookie)
@@ -20,8 +20,8 @@ if (process.env.NODE_ENV !== 'production') {
  require('@/mock')
}
Vue.prototype.$http = http    // 挂载, ajax请求方法
Vue.prototype.isAuth = isAuth // 挂载, 权限方法
Vue.prototype.$http = httpRequest // 挂载, ajax请求方法
Vue.prototype.isAuth = isAuth     // 挂载, 权限方法
/* eslint-disable no-new */
new Vue({

src/mock/create.js

@@ -1,5 +1,5 @@
import Mock from 'mockjs'
import http from '@/utils/http'
import http from '@/utils/httpRequest'
import merge from 'lodash/merge'
/**

src/router/index.js

@@ -6,7 +6,8 @@
 */
import Vue from 'vue'
import Router from 'vue-router'
import http from '@/utils/http'
import http from '@/utils/httpRequest'
import { isURL } from '@/utils/validate'
Vue.use(Router)
@@ -15,8 +16,8 @@ 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: '登录' }
  { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } }
]
// 主入口路由(需嵌套上左右整体布局)
@@ -25,10 +26,23 @@ const mainRoutes = {
  component: _import('main'),
  name: 'main',
  redirect: { name: 'home' },
  desc: '主入口整体布局',
  meta: { title: '主入口整体布局' },
  children: [
    { path: '/home', component: _import('common/home'), name: 'home', desc: '首页' },
    { path: '/theme', component: _import('common/theme'), name: 'theme', desc: '主题' }
    // 通过meta对象设置路由展示方式
    // 1. isTab: 是否通过tab展示内容, true: 是, false: 否
    // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
    { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
    {
      path: '/demo-01',
      component: null, // 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
      name: 'demo-01',
      meta: {
        title: '我是一个通过iframe嵌套展示内容, 并通过tab打开 demo',
        isTab: true,
        iframeUrl: 'http://fast.demo.renren.io/'
      }
    }
  ],
  beforeEnter (to, from, next) {
    let token = Vue.cookie.get('token')
@@ -42,7 +56,7 @@ const mainRoutes = {
const router = new Router({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),
  isAddDynamicRoutes: false, // 是否已经添加动态(菜单)路由
  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
  routes: globalRoutes.concat(mainRoutes)
})
@@ -50,7 +64,7 @@ router.beforeEach((to, from, next) => {
  // 添加动态(菜单)路由
  // 1. 已经添加 or 全局路由, 直接访问
  // 2. 获取菜单列表, 添加并保存本地存储
  if (router.options.isAddDynamicRoutes || fnCurrentRouteType(to) === 'global') {
  if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to) === 'global') {
    next()
  } else {
    http({
@@ -59,8 +73,8 @@ router.beforeEach((to, from, next) => {
      params: http.adornParams()
    }).then(({data}) => {
      if (data && data.code === 0) {
        fnAddDynamicRoutes(data.menuList)
        router.options.isAddDynamicRoutes = true
        fnAddDynamicMenuRoutes(data.menuList)
        router.options.isAddDynamicMenuRoutes = true
        sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
        sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
      } else {
@@ -93,7 +107,7 @@ function fnCurrentRouteType (route) {
 * @param {*} menuList 菜单列表
 * @param {*} routes 递归创建的动态(菜单)路由
 */
function fnAddDynamicRoutes (menuList = [], routes = []) {
function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
  var temp = []
  for (var i = 0; i < menuList.length; i++) {
    if (menuList[i].list && menuList[i].list.length >= 1) {
@@ -103,14 +117,19 @@ function fnAddDynamicRoutes (menuList = [], routes = []) {
        path: menuList[i].url.replace('/', '-'),
        component: null,
        name: menuList[i].url.replace('/', '-'),
        desc: menuList[i].name,
        meta: { menuId: menuList[i].menuId, isTab: true }
        meta: {
          menuId: menuList[i].menuId,
          title: menuList[i].name,
          isDynamic: true,
          isTab: true,
          iframeUrl: ''
        }
      }
      // url以http[s]?开头, 通过iframe展示
      if (/^http[s]?:\/\/.*/.test(menuList[i].url)) {
      // url以http[s]://开头, 通过iframe展示
      if (isURL(menuList[i].url)) {
        route['path'] = `i-${menuList[i].menuId}`
        route['name'] = `i-${menuList[i].menuId}`
        route['meta']['isIframe'] = true
        route['meta']['iframeUrl'] = menuList[i].url
      } else {
        try {
          route['component'] = _import(`modules/${menuList[i].url}`) || null
@@ -120,7 +139,7 @@ function fnAddDynamicRoutes (menuList = [], routes = []) {
    }
  }
  if (temp.length >= 1) {
    fnAddDynamicRoutes(temp, routes)
    fnAddDynamicMenuRoutes(temp, routes)
  } else {
    mainRoutes.name = 'main-dynamic'
    mainRoutes.children = routes
@@ -128,7 +147,7 @@ function fnAddDynamicRoutes (menuList = [], routes = []) {
      mainRoutes,
      { path: '*', redirect: { name: '404' } }
    ])
    sessionStorage.setItem('dynamicRoutes', JSON.stringify(mainRoutes.children || '[]'))
    sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]'))
    console.log('\n%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue')
    console.log(mainRoutes.children)
    console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->\n\n', 'color:blue')

src/utils/validate.js

@@ -21,3 +21,11 @@ export function isMobile (s) {
export function isPhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}
/**
 * URL地址
 * @param {*} s
 */
export function isURL (s) {
  return /^http[s]?:\/\/.*/.test(s)
}

src/views/main-content.vue

@@ -0,0 +1,126 @@
<template>
  <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
    <!-- 主入口标签页 s -->
    <el-tabs
      v-if="$route.meta.isTab"
      v-model="mainTabsActiveName"
      :closable="true"
      @tab-click="selectedTabHandle"
      @tab-remove="removeTabHandle">
      <el-dropdown class="site-tabs__tools" :show-timeout="0">
        <i class="el-icon-arrow-down el-icon--right"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
          <el-dropdown-item @click.native="tabsRefreshCurrentHandle">刷新当前标签页</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-tab-pane
        v-for="item in mainTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name">
        <el-card :body-style="siteContentViewHeight">
          <iframe
            v-if="item.type === 'iframe'"
            :src="item.iframeUrl"
            width="100%" height="100%" frameborder="0" scrolling="yes">
          </iframe>
          <keep-alive v-else>
            <router-view v-if="item.name === mainTabsActiveName" />
          </keep-alive>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!-- 主入口标签页 e -->
    <el-card v-else :body-style="siteContentViewHeight">
      <keep-alive>
        <router-view />
      </keep-alive>
    </el-card>
  </main>
</template>
<script>
  import { isURL } from '@/utils/validate'
  export default {
    data () {
      return {
      }
    },
    computed: {
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      },
      siteContentViewHeight () {
        var height = this.documentClientHeight - 50 - 30 - 2
        if (this.$route.meta.isTab) {
          height -= 40
          return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
        }
        return { minHeight: height + 'px' }
      }
    },
    methods: {
      // tabs, 选中tab
      selectedTabHandle (tab) {
        tab = this.mainTabs.filter(item => item.name === tab.name)
        if (tab.length >= 1) {
          this.$router.push({ name: tab[0].name })
        }
      },
      // tabs, 删除tab
      removeTabHandle (tabName) {
        var newTabs = this.mainTabs.filter(item => item.name !== tabName)
        if (newTabs.length >= 1) {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            this.$router.push({ name: newTabs[newTabs.length - 1].name }, () => {
              this.mainTabsActiveName = this.$route.name
            })
          }
          this.mainTabs = newTabs
        } else {
          this.menuActiveName = ''
          this.$router.push({ name: 'home' })
        }
      },
      // tabs, 关闭当前
      tabsCloseCurrentHandle () {
        this.removeTabHandle(this.mainTabsActiveName)
      },
      // tabs, 关闭其它
      tabsCloseOtherHandle () {
        this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
      },
      // tabs, 关闭全部
      tabsCloseAllHandle () {
        this.mainTabs = []
        this.menuActiveName = ''
        this.$router.push({ name: 'home' })
      },
      // tabs, 刷新当前
      tabsRefreshCurrentHandle () {
        var tempTabName = this.mainTabsActiveName
        this.removeTabHandle(tempTabName)
        this.$nextTick(() => {
          this.$router.push({ name: tempTabName })
        })
      }
    }
  }
</script>

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

@@ -8,7 +8,7 @@
      v-for="item in menu.list" 
      :key="item.menuId"
      :menu="item"
      :dynamicRoutes="dynamicRoutes">
      :dynamicMenuRoutes="dynamicMenuRoutes">
    </sub-menu>
  </el-submenu>
  <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
@@ -26,7 +26,7 @@
        type: Object,
        required: true
      },
      dynamicRoutes: {
      dynamicMenuRoutes: {
        type: Array,
        required: true
      }
@@ -37,7 +37,7 @@
    methods: {
      // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
      gotoRouteHandle (menu) {
        var route = this.dynamicRoutes.filter(item => item.meta.menuId === menu.menuId)
        var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
        if (route.length >= 1) {
          this.$router.push({ name: route[0].name })
        }

src/views/main-sidebar.vue

@@ -2,19 +2,23 @@
  <aside class="site-sidebar" :class="sidebarClasses">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName"
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu">
        <el-menu-item index="1-1" @click="$router.push({ name: 'home' })">
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="demo-01" @click="$router.push({ name: 'demo-01' })">
          <icon-svg name="mudedi" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">demo-01</span>
        </el-menu-item>
        <sub-menu
          v-for="menu in menuList" 
          :key="menu.menuId"
          :menu="menu"
          :dynamicRoutes="dynamicRoutes">
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
      </el-menu>
    </div>
@@ -23,11 +27,11 @@
<script>
  import SubMenu from './main-sidebar-sub-menu'
  import isEmpty from 'lodash/isEmpty'
  import { isURL } from '@/utils/validate'
  export default {
    data () {
      return {
        dynamicRoutes: []
        dynamicMenuRoutes: []
      }
    },
    components: {
@@ -45,10 +49,7 @@
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      menuActiveName: {
        get () {
          let name = this.$store.state.common.menuActiveName
          return /\S/.test(name) ? name : '1-1'
        },
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
@@ -66,46 +67,38 @@
      }
    },
    watch: {
      '$route' (route) {
        if (route.meta.isTab) {
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          // tab不存在, 先添加
          if (isEmpty(tab)) {
            var menu = this.getMenuByRouteName(route.name, this.menuList)
            if (!isEmpty(menu)) {
              tab = {
                id: menu.menuId,
                name: route.name,
                title: menu.name,
                type: (window.SITE_CONFIG.nestIframeRouteNameList || []).indexOf(route.name) !== -1 ? 'iframe' : 'module',
                url: menu.url
              }
              this.mainTabs = this.mainTabs.concat(tab)
            } else {
              return console.error('未能找到可用标签页！')
            }
          }
          this.menuActiveName = tab.id + ''
          this.mainTabsActiveName = route.name
        }
      }
      $route: 'routeHandle'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicRoutes = JSON.parse(sessionStorage.getItem('dynamicRoutes') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
    },
    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 (menuList[i].url === name) {
            return menuList[i]
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || ''
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
        return temp.length >= 1 ? this.getMenuByRouteName(name, temp) : []
      }
    }
  }

src/views/main.vue

@@ -8,47 +8,7 @@
      <main-navbar />
      <main-sidebar />
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
          <!-- 主入口标签页 s -->
          <el-tabs
            v-if="$route.meta.isTab"
            v-model="mainTabsActiveName"
            :closable="true"
            @tab-click="selectedTabHandle"
            @tab-remove="removeTabHandle">
            <el-dropdown class="site-tabs__tools" :show-timeout="0">
              <i class="el-icon-arrow-down el-icon--right"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
                <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
                <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
                <el-dropdown-item @click.native="tabsRefreshCurrentHandle">刷新当前标签页</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-tab-pane
              v-for="item in mainTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name">
              <el-card :style="siteContentViewHeight">
                <iframe
                  v-if="item.type === 'iframe'"
                  :src="item.url"
                  width="100%" height="100%" frameborder="0" scrolling="yes">
                </iframe>
                <keep-alive v-else>
                  <router-view v-if="item.name === mainTabsActiveName" />
                </keep-alive>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <!-- 主入口标签页 e -->
          <el-card v-else :style="siteContentViewHeight">
            <keep-alive>
              <router-view />
            </keep-alive>
          </el-card>
        </main>
        <main-content />
      </div>
    </template>
  </div>
@@ -57,7 +17,7 @@
<script>
  import MainNavbar from './main-navbar'
  import MainSidebar from './main-sidebar'
  import isEmpty from 'lodash/isEmpty'
  import MainContent from './main-content'
  export default {
    data () {
      return {
@@ -66,7 +26,8 @@
    },
    components: {
      MainNavbar,
      MainSidebar
      MainSidebar,
      MainContent
    },
    computed: {
      documentClientHeight: {
@@ -76,18 +37,6 @@
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      },
      userId: {
        get () { return this.$store.state.user.id },
        set (val) { this.$store.commit('user/updateId', val) }
@@ -95,14 +44,6 @@
      userName: {
        get () { return this.$store.state.user.name },
        set (val) { this.$store.commit('user/updateName', val) }
      },
      siteContentViewHeight () {
        var height = this.documentClientHeight - 50 - 30 - 2
        if (this.$route.meta.isTab) {
          height -= 40
          return this.$route.meta.isIframe ? { height: height + 'px' } : { minHeight: height + 'px' }
        }
        return { minHeight: height + 'px' }
      }
    },
    created () {
@@ -128,56 +69,10 @@
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.loading = false
            this.mainTabs = []
            this.userId = data.user.userId
            this.userName = data.user.username
          }
        })
      },
      // tabs, 选中tab
      selectedTabHandle (tab) {
        tab = this.mainTabs.filter(item => item.name === tab.name)
        if (!isEmpty(tab)) {
          this.$router.push({ name: tab[0].name })
        }
      },
      // tabs, 删除tab
      removeTabHandle (tabName) {
        var newTabs = this.mainTabs.filter(item => item.name !== tabName)
        if (newTabs.length <= 0) {
          this.menuActiveName = ''
          this.$router.push({ name: 'home' })
        } else {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            this.$router.push({ name: newTabs[newTabs.length - 1].name }, () => {
              this.mainTabsActiveName = this.$route.name
            })
          }
          this.mainTabs = newTabs
        }
      },
      // tabs, 关闭当前
      tabsCloseCurrentHandle () {
        this.removeTabHandle(this.mainTabsActiveName)
      },
      // tabs, 关闭其它
      tabsCloseOtherHandle () {
        this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
      },
      // tabs, 关闭全部
      tabsCloseAllHandle () {
        this.mainTabs = []
        this.menuActiveName = ''
        this.$router.push({ name: 'home' })
      },
      // tabs, 刷新当前
      tabsRefreshCurrentHandle () {
        var tempTabName = this.mainTabsActiveName
        this.removeTabHandle(tempTabName)
        this.$nextTick(() => {
          this.$router.push({ name: tempTabName })
        })
      }
    }
  }