代码先锋网 代码片段及技术文章聚合

刚开始接触项目，从0开始搭建管理平台，最开始先写的页面布局，采用的很笨的方法：每写一个页面就写一次页面布局样式

<el-container>
    <el-aside style="width: auto"  v-if="$route.meta.keepAlive">
        <keep-alive>

        <!--  封装好的侧边导航栏组件  -->
        <com-sidebar ></com-sidebar>

        </keep-alive>
    </el-aside>

    <el-container>

        <el-header v-if="$route.meta.keepAlive">
          <keep-alive>

          <!--  封装好的顶部标题栏组件  -->
          <header-navbar ></header-navbar>

          </keep-alive>
        </el-header>

        <el-main>

          <!--  此处为不同的页面样式语句  -->

        </el-main>
    </el-container>
</el-container>

后来随着页面逐渐变多，代码冗余量也逐渐增多。于是采取了以下方法将整体的页面布局注册为了全局布局组件：

App.main文件

HTML：
<el-container>
      <el-aside style="width: auto" v-if="$route.meta.keepAlive">
        <keep-alive>
          <com-sidebar></com-sidebar>
        </keep-alive>
      </el-aside>
      <el-container>
        <el-header v-if="$route.meta.keepAlive">
          <keep-alive>
            <header-navbar></header-navbar>
          </keep-alive>
        </el-header>
        <el-main style="padding:0">
          <router-view></router-view>
        </el-main>
      </el-container>
</el-container>



JS：
<script>
import ComSidebar from "@/components/sidebar/sidebar";
import HeaderNavbar from "@/components/navbar/navbar";

export default {
  name: 'App',
  components: {
    ComSidebar,
    HeaderNavbar
  }
}
</script>

对于登录页、404页等不需要侧边栏的页面，可以利用keep-alive结合$route.meta来判断渲染（App.vue见上）

route/index.js文件

{
        path: '/login',
        component: () => import('@/pages/login/'),
        hidden: true,
        meta: {
            keepAlive: false,
            title: '登录'
        }
},