3.9。スクロール動作
行動の役割をスクロールセットは、あなたが望む位置にページスクロールを行う、新しいルートをナビゲートすることです。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
}注：この機能はサポートhistory.pushStateブラウザで利用可能です。
3.10。トランジションエフェクト
VUEは、のトランジションコンポーネントをカプセル化し、トランジション効果を提供することができます
<transition>
<router-view></router-view>
</transition>3.10.1。途中でトランジションエフェクトトランジションCSSクラス名を設定するには
Transitionクラス名は以下のとおりです。
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;
}私たちは、カスタムのクラス名は、接頭辞をカスタマイズすることができますされ、ここで注意することは、「フェードイン」になった接頭辞が、後者は入力し、入力した-に合わせてカスタマイズすることができない、カスタムクラス名は、あなたがアセンブリの移行に名前を追加する必要がありますプロパティ
<transition mode="out-in" name="fade">
<router-view></router-view>
</transition>上記のコード、我々は遷移モードのセットを表すモード属性を見つけ、外での人気は、最初は、再入国だけでなく、他のモードを残していることを言って、中出し、最初に、そして休暇を入力してください
3.11。フック関数
ここでは厳しいが、フック関数を言って人気のない、フックの生活を見てみましょう
物事を掛けるためのフックの役割は、例えば、特定の位置に機能ハングをプログラミングでは、画像は、フックとして理解することが可能である。VUEのコンポーネントのライフサイクル
ここでハングしていると言って人気beforecreateと作成したフック関数は、対応する時間に実行が実行をトリガされます、です
ネジ教室のビデオレッスンアドレス：のhttp：//edu.nodeing.com