對vue中鉤子函數的理解

一、beforeCreate 鉤子

   該階段組件實例剛建立，組件屬性計算以前（可理解爲組件屬性還未初始化，未綁定，未掛載元素el），好比：el，data，methods等，若是你試圖在beforeCreated鉤子中獲取這些屬性值，會獲得ubdefined 的結果，可是

能夠獲取到this對象，由於此時組件剛被建立好，因此this已經引用了該組件對象。

二、created 鉤子

 該階段組件實例建立完成，組件屬性綁定完成，但DOM還未生成，el屬性還不存在

三、beforeMount 鉤子

 該階段組件實例已經建立完成，可是el還未掛載具體元素

四、mounted鉤子

 該階段組件實例已經建立完成，可是el 已掛載具體元素，此時的el屬性不爲undefined

 

五、Vue：router 的beforeEach 與afterEach 鉤子函數

 在路由跳轉的時候，咱們須要一些權限判斷或者其餘操做。這個時候就須要使用路由的鉤子函數。

定義：路由鉤子主要是給使用者在路由發生變化時進行一些特殊處理而定義的函數

 

 整體來講，vue裏面提供了三大類鉤子，兩種函數

  一、全局鉤子

  二、某個路由的鉤子

  三、組件內鉤子

 兩種函數：

 一、Vue.beforeEach(function(to,from,next){})  // 在跳轉以前執行

 二、Vue.afterEach(function(to,from){})  // 在跳轉以後判斷

  全局鉤子函數

  顧名思義，它是對全局有效的一個函數

 router.beforeEach((to,from,next)=>{

　　let token = router.app.$storage.fetch("token");

       let needAuth = to.matched.some(item => item.meta.login);

     if(!token && needAuth) return next({path: "/login"});

     next();

})

beforeEach 函數有三個參數：

 to: router 即將進入路由對象

from：當前導航即將離開的路由

next：Function，進行管道中的一個鉤子，若是執行完了，則導航的狀態就是confirmed（確認的）；不然爲false，終止導航

 afterEach 函數不用傳next()函數

 

 

 某個路由的鉤子函數

 顧名思義，它是寫在某個路由裏頭的函數，本質上跟組件內函數沒有區別

 

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

路由組件的鉤子

注意：這裏說的是路由組件！

路由組件 屬於 組件，但組件 不等同於 路由組件！所謂的路由組件：直接定義在router中component處的組件。如：

var routes = [
{
path:'/home',
component:home,
name:"home"
}
]

用 vue-route 的 beforeEach 實現導航守衛（路由跳轉前驗證登陸）

下面寫一個例子，須要在跳轉前判斷是否是已登陸；已登陸的狀況再去登陸頁，跳轉至首頁：

 

const vueRouter = new Router({ routes: [ //...... { path: '/account', name: 'account', component: Account, children: [ {name: 'course', path: 'course', component: CourseList}, {name: 'order', path: 'order', component: OrderList} ] } ]});vueRouter.beforeEach(function (to, from, next) { const nextRoute = [ 'account', 'order', 'course']; const auth = store.state.auth; //跳轉至上述3個頁面 if (nextRoute.indexOf(to.name) >= 0) { //未登陸 if (!store.state.auth.IsLogin) { vueRouter.push({name: 'login'}) } } //已登陸的狀況再去登陸頁，跳轉至首頁 if (to.name === 'login') { if (auth.IsLogin) { vueRouter.push({name: 'home'}); } } next();});