后台管理系统的布局小解

<template>
  <div>
    <!-- 头部 -->
    <el-row class="vheader">
      <el-col :span="24">
        <vheader></vheader>
      </el-col>
    </el-row>

    <!-- 侧边及内容区 -->
    <el-row class="vbody">
        <!-- 侧边 -->
      <el-col :span="7" class="vnav">
        <vnav></vnav>
      </el-col>
      <!-- 内容展示区 -->
      <el-col :span="17" class="content">
        <keep-alive>
            <router-view/>
        </keep-alive>
      </el-col>
    </el-row>
  </div>
</template>

//写一个main.vue。布局好头部，侧边，以及主体内容区。

在路由跳转中，带上main.vue,记住，是每一个路由都带上。也就是意味着，每一次的路由跳转，都是main.vue 的内容。而main.vue的布局跟上图是一样的。那么，跳转的内容怎么来显示？利用路由的children属性，定义children是我们要跳转内容的部分。这样就实现了我们的需求！而且，登录功能也可以实现，每次进入先跳转到登录页。
import Main from '../views/main/main'
{
        path: '/KeyPointReportPage',//关键指标
        name: 'KeyPointReportPage',
        component: Main,
        children: [
            {
                path: '/KeyPointReportPage',
                name: 'KeyPointReportPage',
                component: () => import('../components/KeyPointReportPage/KeyPointReportPage')
            }
        ]
    }