vue项目准备与骨架搭建（二）

接上篇 

 

为什么导航不使用fixed定位：

首先解释下，手机端的头部导航和底部导航，位置一般都是固定不变的

但是我们这里不使用固定定位fixed，因为它在手机端的兼容性并不好

我们可以设置总容器为relative，并且溢出隐藏，然后设置头部导航和底部导航absolute

页面中除去头部和底部的部分作为滚动区域

 

在vue中，组件一般不包含位置信息，这样不利用组件复用。

位置信息一般由父组件和页面组件来提供

 

修改app.vue

<template>
  <div id="app" class="g-container">
    <div class="g-view-container">
      <router-view></router-view>
    </div>
    <div class="g-footer-container"></div>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

 

新建_containers.scss（书写app.vue中对应的全局样式）

@import "mixins";

.g-container{
    position: relative;
    width:100%;
    height:100%;
    max-width:640px;
    min-width:320px;
    margin:0 auto;
    overflow:hidden;
}
.g-view-container{
    height:100%;
    padding-bottom:$tabbar-height; // 注意移动端在reset文件里要设置box-sizing:border-box
}
.g-footer-container{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);
    z-index:$tabbar-z-index;
}

 

_base.scss中添加html,body的溢出隐藏

 

 

补充一下，因为我开了格式检验，然后由于个人代码风格的原因，vue老是因为一些空格或者空白或者空行的问题报一大堆错误

真的烦死了，虽然感觉不太好，但是我还是决定把它关掉

修改config--index.js

将useeslint的值改成false就好了

 

 

接下来开发底部导航条

在components目录中创建目录tabbar，里面创建index.vue

<template>
    <div class="g-tabbar">
        <router-link class="g-tabbar-item" to="/home">
            <i class="iconfont icon-home"></i>
            <span>首页</span>
        </router-link>
        <router-link class="g-tabbar-item" to="/category">
            <i class="iconfont icon-category"></i>
            <span>分类页</span>
        </router-link>
        <router-link class="g-tabbar-item" to="/cart">
            <i class="iconfont icon-cart"></i>
            <span>购物车</span>
        </router-link>
        <router-link class="g-tabbar-item" to="/personal">
            <i class="iconfont icon-personal"></i>
            <span>个人中心</span>
        </router-link>
    </div>
</template>

<script>
export default {
    name:"ctabbar"
}
</script>

// lang="scss"指定是scss，scoped只在该组件中有效
<style lang="scss" scoped>
    @import "~assets/scss/mixins";//必须加波浪线才不会报错，要问理由我也不清楚

    .router-link-active{
        color:$link-active-color;
    }
</style>

 

新建_tabbar.scss

@import "mixins";

.g-tabbar{
    display:flex;
    width:100%;
    height:$tabbar-height;
    background:#fff;

    &-item{
        flex:1;
        @include flex-center(column);

        .iconfont{
            margin-bottom:4px;
            font-size:$icon-font-size;
        }
    }

}

 

修改app.vue

 

 

效果图

 

 

vue-router

接下来创建页面组件，使用路由来跳转

首先在pages页面下创建6个文件夹，命名分别是：home/category/cart/personal/search/product

每个文件夹下都有对应的index.vue，代码如下：

红框内根据不同页面进行调整

 

 

修改路由index.js

import vue from 'vue'
import router from 'vue-router'
//引入页面组件，这里不直接引入，而是使用路由的懒加载
// import home from 'pages/home';
// import category from 'pages/category';
// import cart from 'pages/cart';
// import personal from 'pages/personal';
// import search from 'pages/search';
// import product from 'pages/product';

vue.use(router)

//使用es6语法时，一般默认用const，只有当变量后面会变化时，使用let
//这里定义的都是一级路由
const routes=[
  {
    name:'home',
    path:'/home',
    component:()=>import('pages/home'), //懒加载，对效率优化
    children:[//二级路由
      {
        name:'home-product',
        path:'product/:id',//一定不能加/
        component:()=>import('pages/product') //懒加载，对效率优化
      }
    ]
  },
  {
    name:'category',
    path:'/category',
    component:()=>import('pages/category') //懒加载，对效率优化
  },
  {
    name:'cart',
    path:'/cart',
    component:()=>import('pages/cart') //懒加载，对效率优化
  },
  {
    name:'personal',
    path:'/personal',
    component:()=>import('pages/personal') //懒加载，对效率优化
  },
  {
    name:'search',
    path:'/search',
    component:()=>import('pages/search') //懒加载，对效率优化
  },
  {//url错误时默认返回home页
    path:'*',
    redirect:'/home'
  }
]

export default new router({
  routes
})

 

由于home中存在二级路由，需要定义链接

因此修改home目录中的index.vue

 

 

浏览器访问测试