支持子路由设置，通过meta isTab属性, 设定是否通过tab标签页展示内容

src/assets/scss/_base.scss

@@ -214,9 +214,10 @@ i.site-sidebar__menu-icon {
.site-content {
  position: relative;
  padding: 15px;
}
.site-content--tabs {
  padding: 55px 0 0;
  > *[class^="mod-"] {
    padding: 15px;
    background-color: #fff;
  }
  > .el-tabs {
    .el-tabs__header {
      position: fixed;
@@ -237,14 +238,18 @@ i.site-sidebar__menu-icon {
    .el-tabs__content {
      padding: 0 15px 15px;
    }
    .el-pagination {
      margin-top: 15px;
      text-align: right;
    }
    .el-breadcrumb {
      padding: 0 0 15px;
      margin-bottom: 22px;
      border-bottom: 1px solid #ebeef5;
    }
  }
  .el-pagination {
    margin-top: 15px;
    text-align: right;
  }
  &--tabs {
    padding: 55px 0 0;
  }
}

src/router/index.js

@@ -21,25 +21,16 @@ export default new Router({
      redirect: { name: 'home' },
      desc: '上左右整体布局',
      children: [
        // 通过isTab属性, 设定是否通过tab标签页展示内容
        { path: '/home', component: _import('home/index'), name: 'home', desc: '首页' },
        {
          path: '/content-tabs',
          component: _import('layout/content-tabs'),
          name: 'content-tabs',
          redirect: { name: '404' },
          desc: '内容需通过tabs展示',
          children: [
            // 以'/n'开头统一拦截, 标记为左侧菜单导航tab展示内容方式路由
            { path: '/n/user', component: _import('user/index'), name: 'user', desc: '管理员管理' },
            { path: '/n/role', component: _import('role/index'), name: 'role', desc: '角色管理' },
            { path: '/n/menu', component: _import('menu/index'), name: 'menu', desc: '菜单管理' },
            { path: '/n/sql', component: _import('sql/index'), name: 'sql', desc: 'SQL监控' },
            { path: '/n/schedule', component: _import('schedule/index'), name: 'schedule', desc: '定时任务' },
            { path: '/n/config', component: _import('config/index'), name: 'config', desc: '参数管理' },
            { path: '/n/oss', component: _import('oss/index'), name: 'oss', desc: '文件上传' },
            { path: '/n/log', component: _import('log/index'), name: 'log', desc: '系统日志' }
          ]
        }
        { path: '/user', component: _import('user/index'), name: 'user', desc: '管理员管理', meta: { isTab: true } },
        { path: '/role', component: _import('role/index'), name: 'role', desc: '角色管理', meta: { isTab: true } },
        { path: '/menu', component: _import('menu/index'), name: 'menu', desc: '菜单管理', meta: { isTab: true } },
        { path: '/sql', component: _import('sql/index'), name: 'sql', desc: 'SQL监控', meta: { isTab: true } },
        { path: '/schedule', component: _import('schedule/index'), name: 'schedule', desc: '定时任务', meta: { isTab: true } },
        { path: '/config', component: _import('config/index'), name: 'config', desc: '参数管理', meta: { isTab: true } },
        { path: '/oss', component: _import('oss/index'), name: 'oss', desc: '文件上传', meta: { isTab: true } },
        { path: '/log', component: _import('log/index'), name: 'log', desc: '系统日志', meta: { isTab: true } }
      ],
      beforeEnter (to, from, next) {
        let token = Vue.cookie.get('token')

src/views/home/index.vue

@@ -1,28 +1,26 @@
<template>
  <div class="site-content site-content--home">
    <el-card :style="contentViewStyles">
      <h3>项目介绍</h3>
      <ul>
        <li>一个轻量级的Java快速开发平台，能快速开发项目并交付【接私活利器】</li>
        <li>友好的代码结构及注释，便于阅读及二次开发</li>
        <li>完善的XSS防范及脚本过滤，彻底杜绝XSS攻击</li>
        <li>实现前后端分离，通过token进行数据交互</li>
        <li>推荐使用阿里云服务器部署项目，免费领取阿里云优惠券，请点击【<a href="//promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=y93lfwbg&productCode=dmspre&utm_source=y93lfwbg" target="_blank">免费领取</a>】</li>
      </ul>
      <h3>获取帮助</h3>
      <ul>
        <li>官方社区：<a href="//renren.io" target="_blank">renren.io</a></li>
        <li>前端Git地址：<a href="//github.com/daxiongYang/renren-fast-vue" target="_blank">github.com/daxiongYang/renren-fast-vue</a></li>
        <li>后台Git地址：<a href="//git.oschina.net/renrenio/renren-fast" target="_blank">git.oschina.net/renrenio/renren-fast</a></li>
        <li>代码生成器：<a href="//git.oschina.net/renrenio/renren-generator" target="_blank">git.oschina.net/renrenio/renren-generator</a></li>
        <li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
      </ul>
      <h3>官方QQ群</h3>
      <ul>
        <li>高级群：324780204(大牛云集，跟大牛学习新技能)</li>
        <li>普通群：145799952(学习交流，互相解答各种疑问)</li>
      </ul>
    </el-card>
  <div class="mod-home">
    <h3>项目介绍</h3>
    <ul>
      <li>一个轻量级的Java快速开发平台，能快速开发项目并交付【接私活利器】</li>
      <li>友好的代码结构及注释，便于阅读及二次开发</li>
      <li>完善的XSS防范及脚本过滤，彻底杜绝XSS攻击</li>
      <li>实现前后端分离，通过token进行数据交互</li>
      <li>推荐使用阿里云服务器部署项目，免费领取阿里云优惠券，请点击【<a href="//promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=y93lfwbg&productCode=dmspre&utm_source=y93lfwbg" target="_blank">免费领取</a>】</li>
    </ul>
    <h3>获取帮助</h3>
    <ul>
      <li>官方社区：<a href="//renren.io" target="_blank">renren.io</a></li>
      <li>前端Git地址：<a href="//github.com/daxiongYang/renren-fast-vue" target="_blank">github.com/daxiongYang/renren-fast-vue</a></li>
      <li>后台Git地址：<a href="//git.oschina.net/renrenio/renren-fast" target="_blank">git.oschina.net/renrenio/renren-fast</a></li>
      <li>代码生成器：<a href="//git.oschina.net/renrenio/renren-generator" target="_blank">git.oschina.net/renrenio/renren-generator</a></li>
      <li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
    </ul>
    <h3>官方QQ群</h3>
    <ul>
      <li>高级群：324780204(大牛云集，跟大牛学习新技能)</li>
      <li>普通群：145799952(学习交流，互相解答各种疑问)</li>
    </ul>
  </div>
</template>
@@ -48,7 +46,7 @@
</script>
<style>
  .site-content--home {
  .mod-home {
    line-height: 1.5;
  }
</style>

src/views/layout/content-tabs.vue

@@ -1,28 +1,26 @@
<template>
  <div class="site-content site-content--tabs">
    <el-tabs
      v-model="tabActiveName"
      :closable="$store.state.contentTabs.length > 1"
      @tab-click="selectedTabHandle"
      @tab-remove="removeTabHandle">
        <el-tab-pane
          v-for="item in $store.state.contentTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name">
          <el-card :body-style="contentViewHeight(item)">
            <iframe
              v-if="item.type === 'iframe'"
              :src="getNestIframeUrl(item.url)"
              width="100%" height="100%" frameborder="0" scrolling="yes">
            </iframe>
            <keep-alive v-else>
              <router-view v-if="item.name === tabActiveName"></router-view>
            </keep-alive>
          </el-card>
        </el-tab-pane>
    </el-tabs>
  </div>
  <el-tabs
    v-model="tabActiveName"
    :closable="$store.state.contentTabs.length > 1"
    @tab-click="selectedTabHandle"
    @tab-remove="removeTabHandle">
    <el-tab-pane
      v-for="item in $store.state.contentTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name">
      <el-card :body-style="contentViewHeight(item)">
        <iframe
          v-if="item.type === 'iframe'"
          :src="getNestIframeUrl(item.url)"
          width="100%" height="100%" frameborder="0" scrolling="yes">
        </iframe>
        <keep-alive v-else>
          <router-view v-if="item.name === tabActiveName"></router-view>
        </keep-alive>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>
<script>

src/views/layout/index.vue

@@ -7,7 +7,13 @@
      <topbar></topbar>
      <sidebar></sidebar>
      <div class="site-content__wrapper" :style="siteContentWarpperStyles">
        <router-view></router-view>
        <div class="site-content" :class="{ 'site-content--tabs': routeIsTab }">
          <keep-alive v-if="!routeIsTab">
            <router-view></router-view>
          </keep-alive>
          <!-- tab标签页, 内容展示方式 -->
          <content-tabs v-else></content-tabs>
        </div>
      </div>
    </template>
  </div>
@@ -40,6 +46,9 @@
        return [
          { 'minHeight': this.$store.state.documentClientHeight + 'px' }
        ]
      },
      routeIsTab () {
        return this.$route.meta && this.$route.meta.isTab
      }
    },
    created () {

src/views/layout/sidebar.vue

@@ -61,7 +61,7 @@
      },
      // 路由操作
      routeHandle (route) {
        if (/^\/n\/.*$/.test(route.path)) {
        if (route.meta && route.meta.isTab) {
          var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
          // tab不存在, 先添加
          if (isEmpty(tab)) {

static/config/index.js

@@ -4,7 +4,7 @@
;(function () {
  window.SITE_CONFIG = {}
  // api接口请求地址
  window.SITE_CONFIG.baseUrl = '//demo.renren.io/renren-fast'
  window.SITE_CONFIG.baseUrl = '//dev.demo.renren.io/renren-fast'
  // 嵌套iframe地址
  window.SITE_CONFIG.nestIframeUrl = '//demo.renren.io/renren-fast/'