vue-router的鉤子函數(shù)

vue路由鉤子大致可以分為三類:

1.全局鉤子

主要包括beforeEach和aftrEach,

????beforeEach函數(shù)有三個參數(shù):

to:router即將進(jìn)入的路由對象

from:當(dāng)前導(dǎo)航即將離開的路由

next:Function,進(jìn)行管道中的一個鉤子溃列,如果執(zhí)行完了挥唠,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)斯撮;否則為false,終止導(dǎo)航。

????afterEach函數(shù)不用傳next()函數(shù)

這類鉤子主要作用于全局,一般用來判斷權(quán)限,以及以及頁面丟失時候需要執(zhí)行的操作,例如:

//使用鉤子函數(shù)對路由進(jìn)行權(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)限則可進(jìn)入轧葛,這里只是簡單的模擬管理員權(quán)限而已

? ? ? ? role === 'admin' ? next() : next('/403');

? ? }else{

? ? ? ? // 簡單的判斷IE10及以下不進(jìn)入富文本編輯器,該組件不兼容

? ? ? ? if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){

? ? ? ? ? ? Vue.prototype.$alert('vue-quill-editor組件不兼容IE10及以下瀏覽器,請使用更高版本的瀏

????????????覽器查看', '瀏覽器不兼容通知', {

? ? ? ? ? ? ? ? confirmButtonText: '確定'

? ? ? ? ? ? });

? ? ? ? }else{

? ? ? ? ? ? next();

? ? ? ? }

? ? }

})

2.單個路由里面的鉤子

主要用于寫某個指定路由跳轉(zhuǎn)時需要執(zhí)行的邏輯

??????????????{

? ? ? ? ? ? ? ? ? ? path: '/dashboard',

? ? ? ? ? ? ? ? ? ? component: resolve => require(['../components/page/Dashboard.vue'], resolve),

? ? ? ? ? ? ? ? ? ? meta: { title: '系統(tǒng)首頁' },

? ? ? ? ? ? ? ? ? ? beforeEnter: (to, from, next) => {


? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? beforeLeave: (to, from, next) => {


? ? ? ? ? ? ? ? ? ? }


? ? ? ? ? ? ? ? },

3.組件路由

? ? 主要包括?beforeRouteEnter和beforeRouteUpdate?,beforeRouteLeave,這幾個鉤子都是寫在組件里面也可以傳三個參數(shù)(to,from,next),作用與前面類似.

? beforeRouteEnter(to, from, next) {

? ? next(vm => {

? ? ? if (

? ? ? ? vm.$route.meta.hasOwnProperty('auth_key') &&

? ? ? ? vm.$route.meta.auth_key != ''

? ? ? ) {

? ? ? ? if (!vm.hasPermission(vm.$route.meta.auth_key)) {

? ? ? ? ? vm.$router.replace('/admin/noPermission')

? ? ? ? }

? ? ? }

? ? })

? },

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末既绕,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子涮坐,更是在濱河造成了極大的恐慌凄贩,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件袱讹,死亡現(xiàn)場離奇詭異疲扎,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)捷雕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進(jìn)店門椒丧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人救巷,你說我怎么就攤上這事壶熏。” “怎么了浦译?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵棒假,是天一觀的道長溯职。 經(jīng)常有香客問我,道長帽哑,這世上最難降的妖魔是什么谜酒? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮妻枕,結(jié)果婚禮上僻族,老公的妹妹穿的比我還像新娘。我一直安慰自己屡谐,他們只是感情好鹰贵,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著康嘉,像睡著了一般碉输。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上亭珍,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天敷钾,我揣著相機(jī)與錄音,去河邊找鬼肄梨。 笑死阻荒,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的众羡。 我是一名探鬼主播侨赡,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼粱侣!你這毒婦竟也來了羊壹?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤齐婴,失蹤者是張志新(化名)和其女友劉穎油猫,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體柠偶,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡情妖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了诱担。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片毡证。...
    茶點(diǎn)故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蔫仙,靈堂內(nèi)的尸體忽然破棺而出料睛,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布秦效,位于F島的核電站雏蛮,受9級特大地震影響涎嚼,放射性物質(zhì)發(fā)生泄漏阱州。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一法梯、第九天 我趴在偏房一處隱蔽的房頂上張望苔货。 院中可真熱鬧,春花似錦立哑、人聲如沸夜惭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽诈茧。三九已至,卻和暖如春捂掰,著一層夾襖步出監(jiān)牢的瞬間敢会,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工这嚣, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鸥昏,地道東北人。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓姐帚,卻偏偏與公主長得像吏垮,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子罐旗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內(nèi)容