购物商城系统设计与实现总结_商城首页的实现

用户从浏览器进入商城系统首先展示的是商城首页，而且我利用了Vue的组件化开发，路由切换即页面局部渲染的改变。我制作的商城，在切换其他页面例如详情页、购物车时，头部和尾部都不发生变化，只有中间部分渲染为对应点击的内容。

首页分布有大部分主要功能的按钮例如用户登陆注册、购物车、订单、商品搜索、分类，所以首页是商城功能点击触发的主要页面。并且首页还有热门商品轮播图展示，频道广场，商品推荐等模块。

<template>
  <div id="Home">
    <div class="main">
      <!-- 头部 -->
      <Header :flag="flag"></Header>
      <!-- 菜单栏 -->
      <Nav></Nav>
      <keep-alive include="Login">
        <!-- 路由占位符 页面渲染切换的主要位置-->
          <router-view @islogin="islogin" v-if="isRouterAlive"></router-view>
      </keep-alive>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../children/Header'
import Nav from '../children/Nav'
import Footer from '../children/Footer'
export default {
  name: 'Home',
  components: {
    Header,Nav,Footer
  },
  provide () {                                          
    return {
      pagesReload: this.pagesReload                                              
    }
  },
  data(){
        return{
            flag:false,
            isRouterAlive: true 
        }
    },
    created() {
        // 判断是否登陆后，修改隐藏登陆注册选项的标志
        if(sessionStorage.getItem("userName")){
            this.flag = true
        }
        else{
            this.flag = false
        }
    },
    methods: {
        //Login组件调动父组件事件，登陆后隐藏登陆注册选项
        islogin(){
            this.flag = true
        },
        // 刷新页面
        pagesReload(){
          this.isRouterAlive = false;            //先关闭，
          this.$nextTick(function () {
            this.isRouterAlive = true;         //再打开
          })
        }
    }
}
</script>

<style scoped>
#Home{
  height:100%;
}
.main{
  /* 通过样式设置，使底部在页面没有占足100%窗口高度时，紧贴窗口底部显示，而不会在不足时紧跟在内容后，使页面下方留有空白 */
    min-height:100%;
    padding-bottom: 110px;
}
</style>