vue练手项目（day2：路由元信息控制底部组件是否显示和函数式路由编程）

1.路由元信息

分析页面发现，当页面处于home和search页面的时候Footer组件是可见的，但是当页面处于login和register的时候Footer是不可见的，这时候自然可以相到要用条件渲染：v-if或者是v-show；但是用哪个呢？一般来说v-if会对真实dom进行操作，选择要不要把dom挂载到页面上，而v-show是通过display样式控制是否显示元素，所以从效率上来看用v-show比较合适。那么v-show接受的是一个Boolean值，那么通过哪个值来控制页面是否显示呢？

首先我们知道，一旦在vue实例中配置了路由器之后，vue实例和vc实例身上就多出来了$route属性和$router属性，前者用来接受路由参数，后者则主要用来进行函数式路由编程。在$route存在一个meta属性，这个属性的值是一个对象，可以在这个对象里放入一些数据，成为路由元信息。那么可以为每个路由route都配置一个meta对象，在对象中添加isShow属性用来控制Footer组件是否显示。

路由配置：

            path:'/home',
            component:Home,
            meta:{
                isShow:true,
            }

    <Footer v-show="$route.meta.isShow"></Footer>

2.函数式路由

通过vm实例上的$router属性可以实现路由式编程，$router有三个方法可以实现函数式路由：push、replace和go，这三者是对于history栈的三种不同操作，一般history栈栈顶就是当前界面的地址，如果通过push（‘路由名’）那么就将这个地址压入history栈，同时前一个地址还保存在栈中，如果用的是replace，那么前一个地址则会被当前路由给替换掉，就无法通过导航栏的后退回到上一个界面，go（n）则指的是从当前页面向前走n步，这个n步是对于history栈来讲的

          <button class="sui-btn btn-xlarge btn-danger" type="button" @click = 'goSearch'>

          goSearch(){
            this.$router.push('/search')
            console.log(this.$router);
          }