1. AppMain區域性滾動，可以固定住表頭等重要資訊

src/layout/components/AppMain.vue

.app-main {
    /*50 = navbar  */
    height: calc(100vh - 70px);
    width: calc(100% - 20px);
    position: relative;
    overflow: auto;
    background: #ffffff;
    margin: 10px;
}
//外部
.main-container {
    background: #f2f2f2;
}

使用

<template>
<div class='main></div>
</template>
<script>
//每個table頁最外層
.main {
  height: 100%;
}
</script>
 

2.顯示三級選單

src/components/Breadcrub/index.vue

  getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]
    //註釋掉首頁拼接
    //   if (!this.isDashboard(first)) {
    //     matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
    //   }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },

 

src/router/index.js

 {
    path: "/example",
    component: Layout,
    redirect: "noRedirect",
    name: "example",
    meta: { title: "一級頁面" },
    children: [
      {
        path: "/example/table",
        name: "Table",
        component: () => import("@/views/table/index"),
        activeMenu: "/example",
        meta: {
          title: "二級頁面",
          showRole: true, //二級頁面必須填寫
          keepAlive: true,//保持狀態必須填寫
        },
        children: [
          {
            path: "/example/table/tree",
            name: "三級頁面",
            component: () => import("@/views/tree/index"),
            meta: { title: "Tree" },
            activeMenu: "/example/table",
            hidden: true
          }
        ]
      }
    ]
  },
 

使用 二級頁面

<template>
<div class='main>
  <router-view></router-view>
      <div class='main v-if="$route.meta.showRole">
      </div
</div>
</template>

 mounted() {
        if (this.$route.meta.showRole) {
            this.getList();
        }
    },

<script>
//每個table頁最外層
.main {
  height: 100%;
}
</script>

3.側邊欄只開一個

src/layout/components/Sidebar/index.vue

//:unique-opened="true"
 <div :class="{ 'has-logo': showLogo }">
        <logo v-if="showLogo" :collapse="isCollapse" />
        <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText" :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
                <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
            </el-menu>
        </el-scrollbar>
    </div>

4.主體頁面loading

為了加強控制，將loading寫到store裡
src/store/modules/app.js

const state = {
  loading: false
};
const mutations = {
CHANGE_LOADING: (state, status) => {
    state.loading = status;
  }
};

const actions = {
  changeLoading({ commit }, status) {
    commit("CHANGE_LOADING", status);
  }
};

src/store/getters.js

const getters = {
  loading: state => state.app.loading,
}
export default getters

src/layout/components/AppMain.vue

<template>
    <section class="app-main" v-loading="loading">
        <transition name="fade-transform" mode="out-in">
            <router-view :key="key" />
        </transition>
    </section>
</template>

<script>
export default {
    name: 'AppMain',
    computed: {
        key() {
            //切換路由，loading關閉
            this.$store.dispatch('app/changeLoading', false);
            //5秒則請求超時，超過6秒則關閉loading
            let that = this;
            setTimeout(function () {
                that.$store.dispatch('app/changeLoading', false);
            }, 6000);
            return this.$route.path;
        },
        loading() {
            let loading = this.$store.state.app.loading;
            return loading;
        },
    },
};
</script>

5.keepAlive

src/layout/components/AppMain.vue

<template>
    <section class="app-main" v-loading="loading">
        <transition name="fade-transform" mode="out-in">
            <keep-alive v-if="$route.meta.keepAlive">
                <router-view :key="key" />
            </keep-alive>
            <router-view :key="key" v-else />
        </transition>
         <!-- 全域性回到頂部 -->
        <el-backtop target=".app-main" :visibility-height="100"></el-backtop>
    </section>
</template>

src/router/index.js

{
    path: "/example",
    component: Layout,
    redirect: "noRedirect",
    name: "example",
    meta: { title: "一級頁面" },
    children: [
      {
        path: "/example/table",
        name: "Table",
        component: () => import("@/views/table/index"),
        activeMenu: "/example",
        meta: {
          title: "二級頁面",
          showRole: true, //二級頁面必須填寫
          keepAlive: true,//保持狀態必須填寫
        },
        children: [
          {
            path: "/example/table/tree",
            name: "三級頁面",
            component: () => import("@/views/tree/index"),
            meta: { title: "Tree" },
            activeMenu: "/example/table",
            hidden: true
          }
        ]
      }
    ]
  },