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 被刪除)，在過渡/動畫完成以後移除。

<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.鉤子函數

這裏不嚴謹但通俗的說鉤子函數，先來看看生活中的鉤子

鉤子的做用就是掛東西的，在編程中把函數掛在某個位置，能夠形象的理解爲某個鉤子，例如；vue中組件的生命週期

這裏的beforecreate和created就是鉤子函數，通俗的說，就是掛在哪兒，運行到對應的時刻會被觸發執行