创建主页面

二级路由的入口

  1. <template>
  2.   <div>顶部通栏</div>
  3.   <div>顶部导航</div>
  4.   <div>
  5.     <!-- 二级路由出口 -->
  6.     <router-view></router-view>
  7.   </div>
  8.   <div>底部</div>
  9. </template>
  11. <script>
  12. export default {
  13.   name: 'XtxLayout'
  14. }
  15. </script>
  17. <style scoped lang='less'>
  19. </style>

组件

将页面中的重复模块封装组件然后全部导入主页面

顶部通栏

需要在 public/index.html中引入字体图标文件

  1. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  2. <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
  3. <title><%= htmlWebpackPlugin.options.title %></title>
  1. <template>
  2.   <nav class="app-topnav">
  3.     <div class="container">
  4.       <ul>
  5.         <li><a href="javascript:;"><i class="iconfont icon-user"></i>周杰伦</a></li>
  6.         <li><a href="javascript:;">退出登录</a></li>
  7.         <li><a href="javascript:;">请先登录</a></li>
  8.         <li><a href="javascript:;">免费注册</a></li>
  9.         <li><a href="javascript:;">我的订单</a></li>
  10.         <li><a href="javascript:;">会员中心</a></li>
  11.         <li><a href="javascript:;">帮助中心</a></li>
  12.         <li><a href="javascript:;">关于我们</a></li>
  13.         <li><a href="javascript:;"><i class="iconfont icon-phone"></i>手机版</a></li>
  14.       </ul>
  15.     </div>
  16.   </nav>
  17. </template>
  18. <script>
  19. export default {
  20.   name: 'AppTopnav'
  21. }
  22. </script>
  23. <style scoped lang="less">
  24. .app-topnav {
  25.   background: #333;
  26.   ul {
  27.     display: flex;
  28.     height: 53px;
  29.     justify-content: flex-end;
  30.     align-items: center;
  31.     li {
  32.       a {
  33.         padding: 0 15px;
  34.         color: #cdcdcd;
  35.         line-height: 1;
  36.         display: inline-block;
  37.         i {
  38.           font-size: 14px;
  39.           margin-right: 2px;
  40.         }
  41.         &:hover {
  42.           color: @xtxColor;
  43.         }
  44.       }
  45.       ~ li {
  46.         a {
  47.           border-left: 2px solid #666;
  48.         }
  49.       }
  50.     }
  51.   }
  52. }
  53. </style>

根据当前的登录状态显示 用户名和退出登录

  1. <ul>
  2.     <template v-if="$store.state.user.profile.token">
  3.       <li><a href="javascript:;"><i class="iconfont icon-user"></i>周杰伦</a></li>
  4.       <li><a href="javascript:;">退出登录</a></li>
  5.     </template>
  6.     <template v-else>
  7.       <li><a href="javascript:;">请先登录</a></li>
  8.       <li><a href="javascript:;">免费注册</a></li>
  9.     </template>
  10. </ul>

头部

  1. <template>
  2.   <header class='app-header'>
  3.     <div class="container">
  4.       <h1 class="logo"><RouterLink to="/">小兔鲜</RouterLink></h1>
  5.       <ul class="app-header-nav">
  6.         <li class="home"><RouterLink to="/">首页</RouterLink></li>
  7.         <li><a href="#">美食</a></li>
  8.         <li><a href="#">餐厨</a></li>
  9.         <li><a href="#">艺术</a></li>
  10.         <li><a href="#">电器</a></li>
  11.         <li><a href="#">居家</a></li>
  12.         <li><a href="#">洗护</a></li>
  13.         <li><a href="#">孕婴</a></li>
  14.         <li><a href="#">服装</a></li>
  15.         <li><a href="#">杂货</a></li>
  16.       </ul>
  17.       <div class="search">
  18.         <i class="iconfont icon-search"></i>
  19.         <input type="text" placeholder="搜一搜">
  20.       </div>
  21.       <div class="cart">
  22.         <a class="curr" href="#">
  23.           <i class="iconfont icon-cart"></i><em>2</em>
  24.         </a>
  25.       </div>
  26.     </div>
  27.   </header>
  28. </template>
  30. <script>
  31. export default {
  32.   name: 'AppHeader'
  33. }
  34. </script>
  36. <style scoped lang='less'>
  37. .app-header {
  38.   background: #fff;
  39.   .container {
  40.     display: flex;
  41.     align-items: center;
  42.   }
  43.   .logo {
  44.     width: 200px;
  45.     a {
  46.       display: block;
  47.       height: 132px;
  48.       width: 100%;
  49.       text-indent: -9999px;
  50.       background: url('~@/assets/images/logo.png') no-repeat center 18px / contain;
  51.     }
  52.   }
  53.   .app-header-nav {
  54.       width: 820px;
  55.       display: flex;
  56.       padding-left: 40px;
  57.       position: relative;
  58.       z-index: 998;
  59.       li {
  60.         margin-right: 40px;
  61.         width: 38px;
  62.         text-align: center;
  63.         a {
  64.           font-size: 16px;
  65.           line-height: 32px;
  66.           height: 32px;
  67.           display: inline-block;
  68.         }
  69.       }
  70.     }
  71.   .search {
  72.     width: 170px;
  73.     height: 32px;
  74.     position: relative;
  75.     border-bottom: 1px solid #e7e7e7;
  76.     line-height: 32px;
  77.     .icon-search {
  78.       font-size: 18px;
  79.       margin-left: 5px;
  80.     }
  81.     input {
  82.       width: 140px;
  83.       padding-left: 5px;
  84.       color: #666;
  85.     }
  86.   }
  87.   .cart {
  88.     width: 50px;
  89.     .curr {
  90.       height: 32px;
  91.       line-height: 32px;
  92.       text-align: center;
  93.       position: relative;
  94.       display: block;
  95.       .icon-cart{
  96.         font-size: 22px;
  97.       }
  98.       em {
  99.         font-style: normal;
  100.         position: absolute;
  101.         right: 0;
  102.         top: 0;
  103.         padding: 1px 6px;
  104.         line-height: 1;
  105.         background: @helpColor;
  106.         color: #fff;
  107.         font-size: 12px;
  108.         border-radius: 10px;
  109.         font-family: Arial;
  110.       }
  111.     }
  112.   }
  113. }
  114. </style>

抽离模板中的header-nav组件，后面的顶部通栏需要复用，这里封装成组件 将当导航栏替换成该组件

  1. <template>
  2.   <ul class="app-header-nav">
  3.     <li class="home"><RouterLink to="/">首页</RouterLink></li>
  4.     <li><a href="#">美食</a></li>
  5.     <li><a href="#">餐厨</a></li>
  6.     <li><a href="#">艺术</a></li>
  7.     <li><a href="#">电器</a></li>
  8.     <li><a href="#">居家</a></li>
  9.     <li><a href="#">洗护</a></li>
  10.     <li><a href="#">孕婴</a></li>
  11.     <li><a href="#">服装</a></li>
  12.     <li><a href="#">杂货</a></li>
  13.   </ul>
  14. </template>
  16. <style scoped lang='less'>
  17. .app-header-nav {
  18.   width: 820px;
  19.   display: flex;
  20.   padding-left: 40px;
  21.   position: relative;
  22.   z-index: 998;
  23.   li {
  24.     margin-right: 40px;
  25.     width: 38px;
  26.     text-align: center;
  27.     a {
  28.       font-size: 16px;
  29.       line-height: 32px;
  30.       height: 32px;
  31.       display: inline-block;
  32.     }
  33.   }
  34. }
  35. </style>

底部

  1. <template>
  2.   <footer class="app_footer">
  3.     <!-- 联系我们 -->
  4.     <div class="contact">
  5.       <div class="container">
  6.         <dl>
  7.           <dt>客户服务</dt>
  8.           <dd><i class="iconfont icon-kefu"></i> 在线客服</dd>
  9.           <dd><i class="iconfont icon-question"></i> 问题反馈</dd>
  10.         </dl>
  11.         <dl>
  12.           <dt>关注我们</dt>
  13.           <dd><i class="iconfont icon-weixin"></i> 公众号</dd>
  14.           <dd><i class="iconfont icon-weibo"></i> 微博</dd>
  15.         </dl>
  16.         <dl>
  17.           <dt>下载APP</dt>
  18.           <dd class="qrcode"><img src="@/assets/images/qrcode.jpg" /></dd>
  19.           <dd class="download">
  20.             <span>扫描二维码</span>
  21.             <span>立马下载APP</span>
  22.             <a href="javascript:;">下载页面</a>
  23.           </dd>
  24.         </dl>
  25.         <dl>
  26.           <dt>服务热线</dt>
  27.           <dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00</small></dd>
  28.         </dl>
  29.       </div>
  30.     </div>
  31.     <!-- 其它 -->
  32.     <div class="extra">
  33.       <div class="container">
  34.         <div class="slogan">
  35.           <a href="javascript:;">
  36.             <i class="iconfont icon-footer01"></i>
  37.             <span>价格亲民</span>
  38.           </a>
  39.           <a href="javascript:;">
  40.             <i class="iconfont icon-footer02"></i>
  41.             <span>物流快捷</span>
  42.           </a>
  43.           <a href="javascript:;">
  44.             <i class="iconfont icon-footer03"></i>
  45.             <span>品质新鲜</span>
  46.           </a>
  47.         </div>
  48.         <!-- 版权信息 -->
  49.         <div class="copyright">
  50.           <p>
  51.             <a href="javascript:;">关于我们</a>
  52.             <a href="javascript:;">帮助中心</a>
  53.             <a href="javascript:;">售后服务</a>
  54.             <a href="javascript:;">配送与验收</a>
  55.             <a href="javascript:;">商务合作</a>
  56.             <a href="javascript:;">搜索推荐</a>
  57.             <a href="javascript:;">友情链接</a>
  58.           </p>
  59.           <p>CopyRight © 小兔鲜儿</p>
  60.         </div>
  61.       </div>
  62.     </div>
  63.   </footer>
  64. </template>
  66. <script>
  67. export default {
  68.   name: 'AppFooter'
  69. }
  70. </script>
  72. <style scoped lang='less'>
  73. .app_footer {
  74.   overflow: hidden;
  75.   background-color: #f5f5f5;
  76.   padding-top: 20px;
  77.   .contact {
  78.     background: #fff;
  79.     .container {
  80.       padding: 60px 0 40px 25px;
  81.       display: flex;
  82.     }
  83.     dl {
  84.       height: 190px;
  85.       text-align: center;
  86.       padding: 0 72px;
  87.       border-right: 1px solid #f2f2f2;
  88.       color: #999;
  89.       &:first-child {
  90.         padding-left: 0;
  91.       }
  92.       &:last-child {
  93.         border-right: none;
  94.         padding-right: 0;
  95.       }
  96.     }
  97.     dt {
  98.       line-height: 1;
  99.       font-size: 18px;
  100.     }
  101.     dd {
  102.       margin: 36px 12px 0 0;
  103.       float: left;
  104.       width: 92px;
  105.       height: 92px;
  106.       padding-top: 10px;
  107.       border: 1px solid #ededed;
  108.       .iconfont {
  109.         font-size: 36px;
  110.         display: block;
  111.         color: #666;
  112.       }
  113.       &:hover {
  114.         .iconfont {
  115.           color: @xtxColor;
  116.         }
  117.       }
  118.       &:last-child {
  119.         margin-right: 0;
  120.       }
  121.     }
  122.     .qrcode {
  123.       width: 92px;
  124.       height: 92px;
  125.       padding: 7px;
  126.       border: 1px solid #ededed;
  127.     }
  128.     .download {
  129.       padding-top: 5px;
  130.       font-size: 14px;
  131.       width: auto;
  132.       height: auto;
  133.       border: none;
  134.       span {
  135.         display: block;
  136.       }
  137.       a {
  138.         display: block;
  139.         line-height: 1;
  140.         padding: 10px 25px;
  141.         margin-top: 5px;
  142.         color: #fff;
  143.         border-radius: 2px;
  144.         background-color: @xtxColor;
  145.       }
  146.     }
  147.     .hotline {
  148.       padding-top: 20px;
  149.       font-size: 22px;
  150.       color: #666;
  151.       width: auto;
  152.       height: auto;
  153.       border: none;
  154.       small {
  155.         display: block;
  156.         font-size: 15px;
  157.         color: #999;
  158.       }
  159.     }
  160.   }
  161.   .extra {
  162.     background-color: #333;
  163.   }
  164.   .slogan {
  165.     height: 178px;
  166.     line-height: 58px;
  167.     padding: 60px 100px;
  168.     border-bottom: 1px solid #434343;
  169.     display: flex;
  170.     justify-content: space-between;
  171.     a {
  172.       height: 58px;
  173.       line-height: 58px;
  174.       color: #fff;
  175.       font-size: 28px;
  176.       i {
  177.         font-size: 50px;
  178.         vertical-align: middle;
  179.         margin-right: 10px;
  180.         font-weight: 100;
  181.       }
  182.       span {
  183.         vertical-align: middle;
  184.         text-shadow: 0 0 1px #333;
  185.       }
  186.     }
  187.   }
  188.   .copyright {
  189.     height: 170px;
  190.     padding-top: 40px;
  191.     text-align: center;
  192.     color: #999;
  193.     font-size: 15px;
  194.     p {
  195.       line-height: 1;
  196.       margin-bottom: 20px;
  197.     }
  198.     a {
  199.       color: #999;
  200.       line-height: 1;
  201.       padding: 0 10px;
  202.       border-right: 1px solid #999;
  203.       &:last-child {
  204.         border-right: none;
  205.       }
  206.     }
  207.   }
  208. }
  209. </style>

接口数据渲染导航

  1. import request from '@/utils/request'
  3. /**
  4. * 获取导航数据
  5. */
  6. export const reqFindHeadCategory = () => request('/home/category/head', 'get')

在组件中调用接口讲数据渲染到组件中 首页数据接口中没有，自己手写一个

  1. <ul class="app-header-nav">
  2.   <li class="home"><RouterLink to="/">首页</RouterLink></li>
  3.   <li v-for="item in categoryList" :key="item.id">
  4.     <RouterLink :to="`/category/${item.id}`">{{item.name}}</RouterLink>
  5.   </li>
  6. </ul>
  8. <script>
  9.   import { ref } from 'vue'
  10.   import { reqFindHeadCategory } from '@/api/home'
  11.   export default {
  12.     setup () {
  13.       const categoryList = ref([])
  14.       async function loadCategory () {
  15.         const res = await reqFindHeadCategory()
  16.         categoryList.value = res.result
  17.       }
  18.       loadCategory()
  20.       return {
  21.         categoryList
  22.       }
  23.     }
  24.   }
  25. </script>

vuex 管理导航数据

导航栏的数据是通用的，使用vuex管理

  1. import { reqFindHeadCategory } from '@/api/home'
  3. export default {
  4.   namespaced: true,
  5.   state: () => {
  6.     return {
  7.       list: []
  8.     }
  9.   },
  10.   mutations: {
  11.     setList (state, categoryList) {
  12.       state.list = categoryList
  13.     }
  14.   },
  15.   actions: {
  16.     async getList (context) {
  17.       const res = await reqFindHeadCategory()
  18.       context.commit('setList', res.result)
  19.     }
  20.   }
  21. }

在首页发送请求 app-header-nav中使用computed获取vuex数据

  1. export default {
  2.   name: 'XtxLayout',
  3.   components: {
  4.     AppTopnav,
  5.     AppHeader,
  6.     AppFooter
  7.   },
  8.   setup () {
  9.     const store = useStore()
  10.     store.dispatch('category/getList')
  11.   }
  12. }
  1. export default {
  2.   setup () {
  3.     const store = useStore()
  4.     const categoryList = computed(() => {
  5.       return store.state.category.list
  6.     })
  7.     return {
  8.       categoryList
  9.     }
  10.   }
  11. }

吸顶导航

  1. <template>
  2. <div class="app-header-sticky">
  3.   <div class="container">
  4.     <RouterLink class="logo" to="/" />
  5.     <AppHeaderNav />
  6.     <div class="right">
  7.       <RouterLink to="/">品牌</RouterLink>
  8.       <RouterLink to="/">专题</RouterLink>
  9.   </div>
  10.   </div>
  11.   </div>
  12. </template>
  14. <script>
  15.   import AppHeaderNav from './app-header-nav'
  16.   export default {
  17.     name: 'AppHeaderSticky',
  18.     components: { AppHeaderNav }
  19.   }
  20. </script>
  22. <style scoped lang='less'>
  23.   .app-header-sticky {
  24.     width: 100%;
  25.     height: 80px;
  26.     position: fixed;
  27.     left: 0;
  28.     top: 0;
  29.     z-index: 999;
  30.     background-color: #fff;
  31.     border-bottom: 1px solid #e4e4e4;
  32.     // 此处为关键样式!!!
  33.     // 默认情况下完全把自己移动到上面
  34.     transform: translateY(-100%);
  35.     // 完全透明
  36.     opacity: 0;
  37.     // 显示出来的类名
  38.     &.show {
  39.       transition: all 0.3s linear;
  40.       transform: none;
  41.       opacity: 1;
  42.     }
  43.     .container {
  44.       display: flex;
  45.       align-items: center;
  46.     }
  47.     .logo {
  48.       width: 200px;
  49.       height: 80px;
  50.       background: url("~@/assets/images/logo.png") no-repeat right 2px;
  51.       background-size: 160px auto;
  52.     }
  53.     .right {
  54.       width: 220px;
  55.       display: flex;
  56.       text-align: center;
  57.       padding-left: 40px;
  58.       border-left: 2px solid @xtxColor;
  59.       a {
  60.         width: 38px;
  61.         margin-right: 40px;
  62.         font-size: 16px;
  63.         line-height: 1;
  64.         &:hover {
  65.           color: @xtxColor;
  66.         }
  67.       }
  68.     }
  69.   }
  70. </style>

监听dom 需要在 onMuounted 生命周期函数 监听 scroll

:class="{show:showFlag}"动态添加类名

  1. setup () {
  2.   const showFlag = ref('')
  3.   onMounted(() => {
  4.     window.addEventListener('scroll', () => {
  5.       const scrollTop = document.documentElement.scrollTop
  6.       // console.log(scrollTop)
  7.       showFlag.value = scrollTop >= 78
  8.     })
  9.   })
  10.   return {
  11.     showFlag
  12.   }
  13.   }

插件重构导航逻辑

装包npm i @vueuse/core@5.3.0 插件网址：https://vueuse.org/core/usewindowscroll/

  1. <template>
  2.   <div class="app-header-sticky" :class="{show:y >= 78}">
  3.     <div class="container">
  4.       <RouterLink class="logo" to="/" />
  5.       <AppHeaderNav />
  6.       <div class="right">
  7.         <RouterLink to="/">品牌</RouterLink>
  8.         <RouterLink to="/">专题</RouterLink>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  14. <script>
  15. import { useWindowScroll } from '@vueuse/core'
  16. import AppHeaderNav from './app-header-nav'
  17. export default {
  18.   name: 'AppHeaderSticky',
  19.   components: { AppHeaderNav },
  20.   setup () {
  21.     const { y } = useWindowScroll()
  22.     // console.log('y', y)
  23.     return {
  24.       y
  25.     }
  26.   }
  27. }
  28. </script>