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()

　　}

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第七十六篇之vue-router中的路由钩子函数基本用法 （建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。