项目架构 (二) 02-完成Layout组件（上下导航栏布局-NavBar导航栏组件-Tabbar标签栏组件 &overflow hidden-内容被修剪不可见 & border-box-没外边距

完成Layout组件（布局）

Layout 布局组件-此处用导航栏，未使用：https://youzan.github.io/vant/#/zh-CN/col

NavBar 导航栏组件：https://youzan.github.io/vant/#/zh-CN/nav-bar

Tabbar 标签栏组件： https://youzan.github.io/vant/#/zh-CN/tabbar

在src/views/Layout.vue中：

<template>
  <div class="container">
      //nav-bar导航栏组件 上栏  fixed:固定定位  条件判断
    <van-nav-bar v-if="active!=='/user'" fixed title="黑马头条" right-text="搜索" @click-right="$router.push('/search')" /> 
        //条件判断 显示类
    <div class="my-wrapper" :class="{noTop:active==='/user'}">
      //二级路由 视图位置
      <router-view></router-view>
    </div>
      //Tabbar 标签栏组件  下底  route-开启路由模式
    <van-tabbar :value="active" route>
        //  to="/"  指点击后跳转的地址  icon="home-o" 指图标的名字
      <van-tabbar-item name="/" to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="/question" to="/question"  icon="chat-o">问答</van-tabbar-item>
      <van-tabbar-item name="/video" to="/video"  icon="video-o">视频</van-tabbar-item>
      <van-tabbar-item name="/user" to="/user"  icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'layout',
//  data(){
//      return{
//          //van-tabbar-item  name的值
//          active:this.$route.path  //当前路径
//      }
//  }
//当去切换二级路由组件的时候，当前组件Layout是没有重新初始化的，data的数据不会变化
    //计算属性：当依赖的数据变化的时候  自己也会变化
  //当然你可以不是有  模版内需要使用 $route.path   
  computed: {
      
    active () {
      return this.$route.path
    }
  }
}
</script>

//去掉scoped，目的是让样式在全局生效
<style lang='less'>
.container{
  width: 100%;
  height: 100%;
  position: relative;
    //设置上下栏的固定位置
  .my-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;  //内容会被修剪，并且其余内容不可见
    padding-top: 46px;
    padding-bottom: 50px;
    box-sizing: border-box;
     //border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。
    &.noTop{
        //noTop  没有上边距；  我的界面特殊  是没有导航栏的  不需要上边距；  需要进行判断进行移除导航栏
      padding-top: 0;
    }
  }
}
</style>

• 提供 首页 问答 视频 我的 基础布局，也就是一级路由组件。
• 回退历史，需要根据地址栏去选中TabBar对应标签。
• 如果选中的是 我的 标签，应该隐藏 NavBar , 内容容器 my-wrapper 去除上内边距。
• 点击搜索，跳转到搜索中心页面。

知识点：

1 overflow

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

2 box-sizing

box-sizing: content-box;

默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。

尺寸计算公式：

width = 内容的宽度

height = 内容的高度

宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

box-sizing: border-box;

width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

尺寸计算公式：

width = border + padding + 内容的宽度

height = border + padding + 内容的高度