part10 header界面渐隐渐显 //动态路由//项目动画

两个组件只同时显示一个 可以用 a v-show='variable'  b: v-show='!variable'

1.对全局事件的解绑

//代码容易出现大量bug

因为影响其他组件

keep-alive还提供了一个生命周期函数 deactivated

执行事件：页面即将被隐藏或者页面即将被替换新的页面

window.removeEventListener('scroll',callback)

2.使用递归组件实现详情页的列表

3.ajax传递数据

 

  mounted() {
    this.axios.get('/api/', {
      params: {
        id: this.$route.params.id
      }
    })
  },

 //keep-alive 中 include exclude 控制单个组件的切换是否缓存

  path: '/HelloWorld2/:id',
      name: 'HelloWorld2',
      component: HelloWorld2,
    }


     handleRouter () {
                //实现跳转的方式2
                this.$router.push('/HelloWorld2/123');
           }

<!--显示参数-->
        {{$route.params.id}}

 

//route中的二级路由和beforeRouteUpdate() 控制多个组件在一个页面显示的 父组件缓存

同一个页面 点击切换路由，达到切换不同组件

 {
      path: '/',
      name: 'first',
      component: first,
      children: [{
        path: '/one',
        name: 'one',
        component: one
      }, {
        path: '/two',
        name: 'two',
        component: two
      }, {
        path: '/three',
        name: 'three',
        component: three
      }]
    }  // 这个是路由设置  在根路径 /      后面的一级切换

 {
      path: '/first1',
      name: 'first1',
      component: first1,
      children: [{
        path: '/one1',
        name: 'one1',
        component: one1
      }, {
        path: '/two1',
        name: 'two1',
        component: two1
      }, {
        path: '/three1',
        name: 'three1',
        component: three1
      }]
    }             一直都是/first1    /one  ... 首先显示的页面是/first1

 beforeRouteUpdate (to, before, next) {
    console.log(to)
    this.name = to.params.name
    next()
  }   //路由切换实现单个页面不同组件的切换

 4.首页拖动滚动 会影响其他路由

文档中有一个滚动行为

只需要在router文件夹中 index再配置一项

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

每次路由切换 新进入显示的页面 x.y都会重置（始终回到最顶部）

5.项目中加入基础动画

组件中再建一个components  fade  //做一个渐隐渐显的动画

<template>
    <transition>
      <slot></slot>
    </transition>
</template>

<script>
  export default {
    data () {
      return {}
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  .v-enter, .v-leave-to
    opacity 0
  .v-enter-active, .v-leave-active
    tansition opacity 2s
</style>