路由守衛(wèi)

全局守衛(wèi)

你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi):

const router = new VueRouter({ ... })

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

當(dāng)一個導(dǎo)航觸發(fā)時,全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行,此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中翔曲。

每個守衛(wèi)方法接收三個參數(shù):

  • to: Route: 即將要進入的目標(biāo) 路由對象

  • from: Route: 當(dāng)前導(dǎo)航正要離開的路由

  • next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)劈愚。

    • next(): 進行管道中的下一個鉤子瞳遍。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)菌羽。

    • next(false): 中斷當(dāng)前的導(dǎo)航掠械。如果瀏覽器的 URL 改變了(可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應(yīng)的地址。

    • next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址猾蒂。當(dāng)前的導(dǎo)航被中斷均唉,然后進行一個新的導(dǎo)航。

    • next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例肚菠,則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)舔箭。

確保要調(diào)用 next 方法,否則鉤子就不會被 resolved蚊逢。

下面寫一個例子:

  1. 列舉需要判斷登錄狀態(tài)的“路由集合”层扶,當(dāng)跳轉(zhuǎn)至集合中的路由時,如果“未登錄狀態(tài)”烙荷,則跳轉(zhuǎn)到登錄頁面LoginPage镜会;
  2. 當(dāng)直接進入登錄頁面LoginPage時,如果“已登錄狀態(tài)”终抽,則跳轉(zhuǎn)到首頁HomePage戳表;
import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile';

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',  // 默認(rèn)進入路由
      redirect: '/home'   //重定向
    },
    {
      path: '/login',
      name: 'login',
      component: LoginPage
    },
    {
      path: '/home',
      name: 'home',
      component: HomePage
    },
    {
      path: '/good-list',
      name: 'good-list',
      component: GoodsListPage
    },
    {
      path: '/good-detail',
      name: 'good-detail',
      component: GoodsDetailPage
    },
    {
      path: '/cart',
      name: 'cart',
      component: CartPage
    },
    {
      path: '/profile',
      name: 'profile',
      component: ProfilePage
    },
    {
      path: '**',   // 錯誤路由
      redirect: '/home'   //重定向
    },
  ]
});

// 全局路由守衛(wèi)
router.beforeEach((to, from, next) => {
  console.log('navigation-guards');
  // to: Route: 即將要進入的目標(biāo) 路由對象
  // from: Route: 當(dāng)前導(dǎo)航正要離開的路由
  // next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)昼伴。

  const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
  let isLogin = global.isLogin;  // 是否登錄
  // 未登錄狀態(tài)匾旭;當(dāng)路由到nextRoute指定頁時,跳轉(zhuǎn)至login
  if (nextRoute.indexOf(to.name) >= 0) {  
    if (!isLogin) {
      console.log('what fuck');
      router.push({ name: 'login' })
    }
  }
  // 已登錄狀態(tài)圃郊;當(dāng)路由到login時季率,跳轉(zhuǎn)至home 
  if (to.name === 'login') {
    if (isLogin) {
      router.push({ name: 'home' });
    }
  }
  next();
});

export default router;
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市描沟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鞭光,老刑警劉巖吏廉,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異惰许,居然都是意外死亡席覆,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門汹买,熙熙樓的掌柜王于貴愁眉苦臉地迎上來佩伤,“玉大人,你說我怎么就攤上這事晦毙∩玻” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵见妒,是天一觀的道長孤荣。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么盐股? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任钱豁,我火速辦了婚禮,結(jié)果婚禮上疯汁,老公的妹妹穿的比我還像新娘牲尺。我一直安慰自己,他們只是感情好幌蚊,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布谤碳。 她就那樣靜靜地躺著,像睡著了一般霹肝。 火紅的嫁衣襯著肌膚如雪估蹄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天沫换,我揣著相機與錄音臭蚁,去河邊找鬼。 笑死讯赏,一個胖子當(dāng)著我的面吹牛垮兑,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播漱挎,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼系枪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了磕谅?” 一聲冷哼從身側(cè)響起私爷,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎膊夹,沒想到半個月后衬浑,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡放刨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年工秩,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片进统。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡助币,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出螟碎,到底是詐尸還是另有隱情眉菱,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布掉分,位于F島的核電站倍谜,受9級特大地震影響迈螟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜尔崔,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一答毫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧季春,春花似錦洗搂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至宇攻,卻和暖如春惫叛,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背逞刷。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工嘉涌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人夸浅。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓仑最,卻偏偏與公主長得像,于是被迫代替她去往敵國和親帆喇。 傳聞我的和親對象是個殘疾皇子警医,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

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

  • 等了半個月的太陽,終于出現(xiàn)了坯钦。暖暖的陽光预皇,那一圈圈的光暈,閃爍的我睜不開眼婉刀,于是就閉上眼吟温,指尖輕觸,感受陽光的溫度...
    鴿子_鴿子閱讀 148評論 0 0
  • 佛說:不爭就是慈悲路星,不辯就是智慧,不聞就是清凈诱桂,不看就是自在洋丐,不貪就是布施,斷惡就是行善挥等,改過就是懺悔友绝,謙卑就是禮...
    菩提天天長閱讀 152評論 0 0
  • 人吶,可以有一百種說法來支持自己心中所想肝劲,哪怕就是路邊一棵草迁客,也會說連它的努力生長體味生命的意義郭宝,那么我又有什么理...
    fefbd8dcd036閱讀 183評論 0 0
  • 這是我寫的第九篇文章了 好久沒來簡書 讀書的習(xí)慣沒變 但好久沒寫寫自己的感受了 現(xiàn)在 聽著大冰的烏蘭巴托的夜 回憶...
    二H少女閱讀 379評論 0 1