vue-router中的路由鉤子函數基本用法彙總

最近學習一下，vue-router的路由鉤子函數，相信只要學前端的小夥伴都接觸的很多，在這裏簡單彙總一下，但願對小夥伴們有所幫助。
路由鉤子函數分爲三種類型以下：
　　第一種：全局鉤子函數。
　　router.beforeEach((to, from, next) => {
　　　　console.log('beforeEach')
　　　　//next() //若是要跳轉的話，必定要寫上next()
　　　　//next(false) //取消了導航
　　　　next() //正常跳轉，不寫的話，不會跳轉
　　})
　　router.afterEach((to, from) => { // 舉例: 經過跳轉後改變document.title
　　　　if( to.meta.title ){
　　　　　　window.document.title = to.meta.title //每一個路由下title
　　　　}else{
　　　　　　window.document.title = '默認的title'
　　　　}
　　})
　　第二種：針對單個路由鉤子函數
　　beforeEnter(to, from, next){
　　　　console.log('beforeEnter')
　　　　next() //正常跳轉，不寫的話，不會跳轉
　　}
　　第三種：組件級鉤子函數
　　beforeRouteEnter(to, from, next){ // 這個路由鉤子函數比生命週期beforeCreate函數先執行，因此this實例尚未建立出來
　　　　console.log("beforeRouteEnter")
　　　　console.log(this) //這時this仍是undefinde，由於這個時候this實例尚未建立出來
　　　　next((vm) => { //vm,能夠這個vm這個參數來獲取this實例,接着就能夠作修改了
　　　　　　vm.text = '改變了'
　　　　})
　　},
　　beforeRouteUpdate(to, from, next){//能夠解決二級導航時，頁面只渲染一次的問題，也就是導航是否更新了，是否須要更新
　　　　console.log('beforeRouteUpdate')
　　　　next();
　　},
　　beforeRouteLeave(to, from, next){// 當離開組件時，是否容許離開
　　　　next()
　　}