Vue 布局分模块 Header、Main、Footer

avatar 2024年01月09日11:19:43 0 84 views
博主分享免费Java教学视频,B站账号:Java刘哥

最近在开发 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
})

 

 

 

 

 

 

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
匿名评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0