最近在开发 vue 版本的 verio 房屋租赁系统，快做好了，记录一些经典的代码

本文介绍布局，即把公共部分成 顶部、中间内容，底部 三部分。

代码结构如下

一、公共部分代码

已剔除业务逻辑代码

1、Header/index.vue

<template>
  <div>这是公共部分-顶部</div>
</template>


<script>

export default {
  components: {},
  data() {
    return {}
  },
  created() {
  },
  methods: {}
}
</script>

<style scoped>

</style>

2、Footer/index.vue

<template>
  <div>这是公共部分-底部</div>
</template>


<script>

export default {
  components: {},
  data() {
    return {}
  },
  created() {
  },
  methods: {}
}
</script>

<style scoped>

</style>

3、Main/index.vue

<template>
  <div class="box">
    <router-view :key="$route.fullPath"/>
  </div>
</template>

<script>
export default {
  computed: {
    key() {
      return this.$route.path
    }
  },
  created() {
  }
}
</script>

<style scoped>
</style>

4、index.vue

<template>
  <div id="main-wrapper">
    <Header id="layout-header"/>
    <el-row>
      <Main id="layout-main"/>
    </el-row>
    <Footer id="layout-footer"/>
  </div>
</template>

<script>
import { Header, Main, Footer } from './components'

export default {
  name: 'FrontLayout',
  components: {
    Header,
    Main,
    Footer
  }
}
</script>

<style lang="css" scoped>
@import '~@/assets/css/styles.css';
</style>

5、index.js

export { default as Header } from './Header/index.vue'
export { default as Main } from './Main/index.vue'
export { default as Footer } from './Footer/index.vue'

二、具体使用

1.route/index.js

删除多余代码

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

// 路由
export const constantRoutes = [
  {
    // 房屋信息详情
    path: '/house/detail/:houseId',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '',
        component: () => import('@/views/house-detail'),
        name: 'HouseDetail'
      }
    ]
  }
]
export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})