vue-router是vue開發(fā)中不可或缺的一部分，也是vue全家桶生態(tài)的重要部分，平時開發(fā)vue時會高頻率使用，尤其是權(quán)限相關(guān)模塊，那么它除了在routes上的應(yīng)用外，還有一些鉤子函數(shù)具體可以應(yīng)用在哪些地方呢

路由的鉤子函數(shù)共有6個
全局的路由鉤子函數(shù)：beforeEach、afterEach
單個的路由鉤子函數(shù)：beforeEnter
組件內(nèi)的路由鉤子函數(shù)：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

下面我就這些鉤子函數(shù)做具體解釋

全局導(dǎo)航鉤子函數(shù)
1. vue router.beforeEach（全局前置守衛(wèi)）
beforeEach的鉤子函數(shù)，它是一個全局的before 鉤子函數(shù)，beforeEach在每次每一個路由改變的時候都得執(zhí)行一遍。
它的三個參數(shù)：
to: (Route路由對象) 即將要進入的目標 路由對象 to對象下面的屬性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）
from: (Route路由對象) 當(dāng)前導(dǎo)航正要離開的路由
next: (Function函數(shù)) 一定要調(diào)用該方法來 resolve 這個鉤子。 調(diào)用方法：next(參數(shù)或者空) ***必須調(diào)用
next：(無參數(shù)的時候): 進行管道中的下一個鉤子，如果走到最后一個鉤子函數(shù)，那么 導(dǎo)航的狀態(tài)就是 confirmed （確認的）
next(‘/’) 或者 next({ path: ‘/’ }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進行一個新的導(dǎo)航。

應(yīng)用場景：可進行一些頁面跳轉(zhuǎn)前處理，例如判斷需要登錄的頁面進行攔截，做登錄跳轉(zhuǎn)

router.beforeEach((to, from, next) => {
    if (to.meta.auth) {
        //判斷該路由是否需要登錄權(quán)限
        if (cookies('token')) {
            //如果存在token,則xxx，如果不存在，那跳轉(zhuǎn)回登錄頁
            next() //不要在next里面加"path:/", 會陷入死循環(huán)，原因是router會終止當(dāng)前然后不斷地跳轉(zhuǎn)
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}//將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
            })
        }
    }
    else {
        next()
    }
})

進入新的頁面時作登錄判斷、管理員權(quán)限判斷、瀏覽器判斷等

//使用鉤子函數(shù)對路由進行權(quán)限跳轉(zhuǎn)
router.beforeEach((to, from, next) => {
    const role = localStorage.getItem('ms_username');
    if(!role && to.path !== '/login'){
        next('/login');
    }else if(to.meta.permission){
        // 如果是管理員權(quán)限則可進入，這里只是簡單的模擬管理員權(quán)限而已
        role === 'admin' ? next() : next('/403');
    }else{
        next();
    }
})

2. vue router.afterEach（全局后置守衛(wèi)）
router.afterEach是頁面加載之后，跟router.beforeEach一樣，區(qū)別是router.beforeEach是頁面加載之前執(zhí)行，而router.afterEach是頁面加載之后執(zhí)行

3. beforeEnter 路由獨享的守衛(wèi)(路由內(nèi)鉤子)
獨享路由守衛(wèi)beforeEnter配置在指定路由中的, 你可以在route配置上直接定義 beforeEnter 守衛(wèi)：

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

再比如根據(jù)當(dāng)前路由數(shù)據(jù)判斷能不能訪問：

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    meta:{ isAuth: false, title:"關(guān)于" },
    children:[
    	{
    		path: '/detail',
    		name: 'Detail',
    		component: Detail,
    		meta:{ auth: false, title:"詳情" },
    		beforeEnter:(to,from,next) =>{
				if(to.meta.auth){
					if(localStorage.getItem('user')){
						next()//調(diào)用next才會往下走
					}
				}else{
					alert("無權(quán)限")
				}
    		}
    	}
    ]
  }
]

注意:如果記錄有重定向?qū)傩?，則 beforeEnter 無效。

4.組件內(nèi)的守衛(wèi)(組件實例內(nèi)的導(dǎo)航鉤子)
beforeRouteEnter：進入這個組件路由之前
beforeRouteLeave：離開這個組件路由
beforeRouteUpdate：再本路由的下級路由切換才會觸發(fā)beforeRouteUpdate

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實例 `this`
    // 因為當(dāng)鉤子執(zhí)行前，組件實例還沒被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
    // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
    // 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
    // 可以訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
    // 可以訪問組件實例 `this`
  }

實際應(yīng)用就是組件創(chuàng)建、離開、更新等
beforeRouteEnter是支持給next傳遞回調(diào)的唯一守衛(wèi)，回調(diào)的參數(shù)就是當(dāng)前組件實例，如下：

beforeRouteEnter(to, from, next) {
	console.log("beforeRouteEnter");
	next(vm => {
		console.log("vm", vm);  //vm就是當(dāng)前組件this
		console.log("data：", vm.data) // 可以獲取當(dāng)前組件的data
		vm.testFun()   //可以執(zhí)行當(dāng)前組件的方法
	});
}

beforeRouteLeave應(yīng)用場景就是在銷毀當(dāng)前組件時觸發(fā)的處理都可以添加在該鉤子函數(shù)中，比如組件中有定時器時, 在路由進行切換的時候, 可使用beforeRouteLeave將定時器進行清理掉，以免內(nèi)存泄漏，造成StackOverflowError的錯誤

beforeRouteLeave (to, from, next) {  
 window.clearInterval(this.timer) //清楚定時器   
 next()
 }

再比如當(dāng)頁面中有未關(guān)閉的窗口, 或未保存的內(nèi)容時, 阻止頁面跳轉(zhuǎn)next(false)
如果頁面內(nèi)有重要的信息需要用戶保存后才能進行跳轉(zhuǎn)

beforeRouteLeave (to, from, next) {
    localStorage.setItem(name, content); //保存到localStorage中
    next()
}

這就是vue-router鉤子函數(shù)的基礎(chǔ)應(yīng)用，當(dāng)然還有很多其他的應(yīng)用角度。
比如beforeRouteEnter可以結(jié)合keep-alive可以實現(xiàn)增加用戶體驗和節(jié)省資源的同時獲取鉤子節(jié)點。
組件在創(chuàng)建時會觸發(fā)created，但是每次進入路由時都會觸發(fā)beforeRouteEnter，所以，當(dāng)一個頁面使用了keep-alive進行了緩存時，離開這個頁面后再次進入時，不會再觸發(fā)created，但是會觸發(fā)beforeRouteEnter，這時候就可以使用路由鉤子進行處理了。文章來源地址http://www.zghlxwxcb.cn/news/detail-800563.html

到了這里，關(guān)于vue-router之路由鉤子函數(shù)應(yīng)用解析的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！