導航鉤子
導航鉤子類似於生命週期鉤子，包含路由進入前，進入後，更新時，退出前等幾個週期，主要用於控制導航的前進後退或跳轉等。
在開始之前，我們先來寫兩個路由
新建html,引入vue.js及vue-router.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<button><router-link to='/route1'>路由一</router-link></button>
<button><router-link to='/route2'>路由二</router-link></button>
</div>
<router-view></router-view>
</div>
<script src="js/router.js"></script>
</body>
</html>
在router.js中定義路由及vue實例
//構建組件
var route1 = Vue.extend({
template: '<div>路由一內容</div>'
});
var route2 = Vue.extend({
template: '<div>路由二內容</div>'
});
//定義路由
var router = new VueRouter({
routes: [
{
path: '/route1',
name: 'route1',
component: route1
},
{
path: '/route2',
name: 'route2',
component: route2
}
]
});
//定義vue實例
var app = new Vue({
el: '#app',
router
})
打開瀏覽器，查看效果
1.全局鉤子
定義路由之後，接着就可以使用<code>router.beforeEach</code>定義全局鉤子
在router.js中定義路由後面加上如下代碼
router.beforeEach((to,from,next) => {
console.log(to)
console.log(from)
})
全局鉤子作用於所有路由，裏面的參數<code>to</code>表示即將要進入的路由對象，<code>from</code>表示即將要離開的路由對象，<code>next</code>是繼續跳轉或中斷的方法。
我們來看一下打印出的對象
我們的操作是點擊路由一按鈕，即將由'/'跳轉至'/route1'，可以看到打印出的第一個對象<code>to</code>的path爲'/route1'，第二個對象<code>from</code>的path爲'/'。
有一個問題，點擊按鈕之後路由並沒有進行跳轉，這是因爲我們沒有寫next方法。next方法有以下3種：
1.<code>next()</code> 默認跳轉
2.<code>next(false)</code>保持當前路由不進行跳轉
3.<code>next('路由路徑') </code>指定路由跳轉
（1）默認跳轉
我們先來試第一種
router.beforeEach((to,from,next) => {
console.log(to)
console.log(from)
next()
})
打開瀏覽器，可以看到路由跳轉正常，並且以默認的路由進行跳轉
（2）保持當前路由不進行跳轉
如果不寫next方法就不會進行跳轉，那麼與next(false)的區別就在於，後者是不管url怎麼改變，也會重置到from對應的路由。
router.beforeEach((to,from,next) => {
console.log(to)
console.log(from)
next(false)
})
可以看到點擊按鈕並無反應，在地址欄輸入其他路由也跳轉回當前路由
（3）指定路由跳轉
這個方法最好不要寫在全局鉤子中，不然會陷入無限循環，跳轉到指定路由又觸發該導航鉤子又進行跳轉
2.路由內鉤子
導航鉤子也可以通過<code>beforeEnter</code>寫在某個路由內部
var router = new VueRouter({
routes: [
{
path: '/route1',
name: 'route1',
component: route1,
meta:{title: '路由一'}
beforeEnter: function(to,from,next){
console.log(to)
console.log(from)
next()
}
},
{
path: '/route2',
name: 'route2',
component: route2,
meta:{title: '路由二'}
}
]
});
這樣只在路由'/route1'下才會觸發該鉤子
3.組件內鉤子
組件內鉤子有三種
var route1 = Vue.extend({
template: '<div>路由一內容</div>',
//對應該組件的路由被確認之前，此時還未創建組件實例
beforeRouteEnter:function(to,from,next){
},
//對應該組件的路由被重複調用之時，如嵌套路由，此時組件實例已被創建
beforeRouteUpdate:function(to,from,next){
},
//即將離開對應該組件的路由時
beforeRouteLeave:function(to,from,next){
}
});
路由元信息
定義路由的時候可以設置<code>meta</code>字段
var router = new VueRouter({
routes: [
{
path: '/route1',
name: 'route1',
component: route1,
meta:{title: '路由一'},
},
{
path: '/route2',
name: 'route2',
component: route2,
meta:{title: '路由二'}
}
]
});
通過這個我們可以在全局鉤子中設置頁面的標題之類的，例如
router.beforeEach(function(to,from,next){
console.log(to)
console.log(from)
if(to.meta.title){
document.title = to.meta.title
}else{
document.title = '路由'
}
next()
})
查看效果
過渡動效
在路由中可以給路由視圖<code><router-view></code>用<code><transition></code>標籤設置總的過渡類名
<transition name="fade" v-on:before-enter="enter">
<router-view></router-view>
</transition>
其中<code>before-enter</code>爲鉤子函數，鉤子函數有以下幾種，本例中只寫了第一種“進入之前”
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
接着給<code>fade</code>類寫過渡樣式
.fade-enter-active, .fade-leave-active{transition: all 0.5s ease;}
.fade-enter, .fade-leave-active{opacity:0;}
查看效果
