Vue入坑——vue-router鉤子函數

上一篇：vue-router別名alias

一塊兒學vue——vue學習總路線

——————————^~^我是萌萌噠分割線^~^————————————————

前言

開始學鉤子函數以前，我有點不能理解這啥意思，後來我看了別人的小demo以後，有了一個初步理解，我以爲應該能夠舉個例子，就好像咱們從接口拿數據分爲幾個階段：發送請求、接收響應、處理數據...

鉤子函數的話，就應該是執行路由以前，執行路由時，路由執行完了...這樣好理解多了吧。

兩種建立鉤子的方法

（1）、路由配置文件中的鉤子函數

a、在index.js裏面寫一個

這裏咱們給hellovue組件寫一個

b、用了一個es6的箭頭函數，裏面的參數分別是：

to：路由將要跳轉的路徑信息

from：路由跳轉以前的路徑信息

next：路由的控制，他的參數一般是false和true

c、點擊一下這個跳轉連接，看他給咱們打印什麼出來

d、那個next（）幹什麼用的？

我來改改他的參數

看看頁面有啥變化

下面的數據都不顯示了？

看看打印

emmmm，打印正常。

哎，我發現點擊了其餘路由以後，再點擊咱們設置了的這個路由，跳轉不過來了。

我知道了，那個next（false）；會阻斷路由的跳轉。

這種寫鉤子函數的方式get到了，可是注意，他只能寫一種，就是beforeEnter

（2）、組件中的鉤子函數

第一種寫鉤子函數的方式，只能寫beforeEnter，下面這種呢就能夠寫兩種啦，不過寫法有些不一樣。

（1）、beforeRouteEnter

他叫做路由進入前的鉤子函數，咱們來看看怎麼寫

a、在right.vue裏寫

    beforeRouteEnter:(to,from,next)=>{
      console.log("準備進入路由組件");
      console.log(to);
      console.log(from);
      next();
    }

總體：

b、運行看打印效果：

好啦，依葫蘆畫瓢，把beforeRouteLeave寫了

 

好啦，鉤子函數的寫法咱們就知道啦，爲之後實戰打好基礎！

——————————^~^我是萌萌噠分割線^~^————————————————

下一篇：