vue全家桶（2.6）

3.9.滚动行为

设置滚动行为的作用是导航到新路由时，让页面滚动到你想要的位置。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
}

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

#3.10.过渡效果

vue中封装了一套transtion组件，可以提供过渡效果

<transition>
  <router-view></router-view>
</transition>

#3.10.1.通过过渡css类名的方式来设置过渡效果

过渡的类名称有：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

image

<template>
  <div class="page">
      <button @click="pushHandle">push方法</button>
      <button @click="replaceHandle">replace方法</button>
      <button @click="backHandle">back方法</button>
      <button @click="forwardHandle">forword方法</button>
      <button @click="goHandle">go方法</button>
      // 设置过渡动效
      <transition mode="out-in">
        <router-view></router-view>
      </transition>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {

    }
  },
  components: {

  },
  methods: {
    pushHandle () {
      // this.$router.push('/hello')   push内部直接给字符串
      // push内部可以给对象
      this.$router.push({name: 'wenda'})
    },
    replaceHandle () {
      this.$router.replace('/questions')
    },
    backHandle () {
      this.$router.back()
    },
    forwardHandle () {
      this.$router.forward()
    },
    goHandle () {
      this.$router.go(1)
    },
    say () {
      console.log(1)
    }

  }
}
</script>

<style scoped>
.page {
  border: 1px solid #ccc;
  background-color: #ccc;
  height: 2000px;

  background-color: aquamarine;
}
.v-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.v-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.v-enter-active {
  transition: 1s;
}

.v-leave {
  transform: translateX(0);
  opacity: 1;
}
.v-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
.v-leave-active{
  transition: 1s;
}

</style>

其中，v- 这个前缀是可以自定义的，例如：

.fade-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.fade-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.fade-enter-active {
  transition: 1s;
}

.fade-leave {
  transform: translateX(0);
  opacity: 1;
}
.fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
.fade-leave-active{
  transition: 1s;
}

我们把类名称的前缀自定义成了“fade-”， 这里需要注意的是前缀可以自定义，但是后面的enter、enter-to不能自定义，自定义类名称后，需要在transition组件上加name属性

<transition mode="out-in" name="fade">
  <router-view></router-view>
</transition>

上面代码中，我们发现有个mode属性，这个属性表示设置过渡的模式， out-in，通俗的说就是先离开，再进入，同时还有另一种模式，in-out，先进入，再离开

#3.11.钩子函数

这里不严谨但通俗的说钩子函数，先来看看生活中的钩子

image

钩子的作用就是挂东西的，在编程中把函数挂在某个位置，可以形象的理解为某个钩子，例如；vue中组件的生命周期

image

这里的beforecreate和created就是钩子函数，通俗的说，就是挂在哪儿，运行到对应的时刻会被触发执行