Vue 路由 導航守衛(wèi)(全局守衛(wèi)锰什、路由獨享守衛(wèi)、組件內守衛(wèi))

一.全局守衛(wèi)

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

2. 回調函數中的參數丁逝,to:進入到哪個路由去汁胆,from:從哪個路由離開,next:函數霜幼,決定是否展示你要看到的路由頁面嫩码。

3. 如下例:main.js中設置全局守衛(wèi)

  • 在main.js中,有一個路由實例化對象router罪既。在main.js中設置守衛(wèi)已是全局守衛(wèi)铸题。
  • 如下,判斷to.path當前將要進入的路徑是否為登錄或注冊琢感,如果是就執(zhí)行next()丢间,展示當前界面。如果不是猩谊,就彈出alert千劈,然后移至登錄界面。
  • 這樣就可實現牌捷,用戶在未登錄狀態(tài)下墙牌,展示的一直是登錄界面。
router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您還沒有登錄暗甥,請先登錄');
    next('/login');
  }
})

4. 全局后置鉤子router.afterEach((to,from)=>{})

  • 只有兩個參數喜滨,to:進入到哪個路由去,from:從哪個路由離撤防。
  • 如下虽风,每次切換路由時,都會彈出alert,點擊確定后辜膝,展示當前頁面无牵。
router.afterEach((to,from)=>{
  alert("after each");
})

5. 判斷store.gettes.isLogin === false 是否登錄

二.組件內的守衛(wèi)

1. 到達這個組件時,beforeRouteEnter:(to,from,next)=>{}

  • 在Admin.vue文件中厂抖,點擊轉到admin路由時茎毁,執(zhí)行beforeRouteEnter函數
  • to,from參數與上面使用方法一致忱辅。next回調函數略有不同七蜘。
  • 如下例,data 組件內守衛(wèi)有特殊情況墙懂,如果我們直接以
    beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}進行訪問admin頁面橡卤,會發(fā)現alert輸出hello undefined。這是因為损搬,現在訪問不到我們的data屬性碧库,執(zhí)行順序是不一致,這與的聲明周期有關场躯。在執(zhí)行完之前谈为,data數據還未渲染。所以這里踢关,next()會給一個對應的回調,幫助完成粘茄。
<script>
export default {
    data(){
        return{
            name:"Arya"
        }
    },
    beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            alert("hello" + vm.name);
        })
    }
}
</script>

2. 離開這個組件時签舞,beforeRouteLeave:(to,from,next)=>{}

  • 點擊其他組件時,判斷是否確認離開柒瓣。確認執(zhí)行next()儒搭;取消執(zhí)行next(false),留在當前頁面芙贫。
beforeRouteLeave:(to,from,next)=>{
        if(confirm("確定離開此頁面嗎搂鲫?") == true){
            next();
        }else{
            next(false);
        }
    }

三.路由獨享的守衛(wèi)

1. beforeEnter:(to,from,next)=>{},用法與全局守衛(wèi)一致磺平。只是魂仍,將其寫進其中一個路由對象中,只在這個路由下起作用拣挪。

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末擦酌,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子菠劝,更是在濱河造成了極大的恐慌赊舶,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,423評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異笼平,居然都是意外死亡园骆,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,147評論 2 385
  • 文/潘曉璐 我一進店門寓调,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锌唾,“玉大人,你說我怎么就攤上這事捶牢○椋” “怎么了?”我有些...
    開封第一講書人閱讀 157,019評論 0 348
  • 文/不壞的土叔 我叫張陵秋麸,是天一觀的道長渐排。 經常有香客問我,道長灸蟆,這世上最難降的妖魔是什么驯耻? 我笑而不...
    開封第一講書人閱讀 56,443評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮炒考,結果婚禮上可缚,老公的妹妹穿的比我還像新娘。我一直安慰自己斋枢,他們只是感情好帘靡,可當我...
    茶點故事閱讀 65,535評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著瓤帚,像睡著了一般描姚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上戈次,一...
    開封第一講書人閱讀 49,798評論 1 290
  • 那天轩勘,我揣著相機與錄音,去河邊找鬼怯邪。 笑死绊寻,一個胖子當著我的面吹牛,可吹牛的內容都是我干的悬秉。 我是一名探鬼主播澄步,決...
    沈念sama閱讀 38,941評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼搂捧!你這毒婦竟也來了驮俗?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,704評論 0 266
  • 序言:老撾萬榮一對情侶失蹤允跑,失蹤者是張志新(化名)和其女友劉穎王凑,沒想到半個月后搪柑,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,152評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡索烹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,494評論 2 327
  • 正文 我和宋清朗相戀三年工碾,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片百姓。...
    茶點故事閱讀 38,629評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡渊额,死狀恐怖,靈堂內的尸體忽然破棺而出垒拢,到底是詐尸還是另有隱情旬迹,我是刑警寧澤,帶...
    沈念sama閱讀 34,295評論 4 329
  • 正文 年R本政府宣布求类,位于F島的核電站奔垦,受9級特大地震影響,放射性物質發(fā)生泄漏尸疆。R本人自食惡果不足惜椿猎,卻給世界環(huán)境...
    茶點故事閱讀 39,901評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望寿弱。 院中可真熱鬧犯眠,春花似錦、人聲如沸症革。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽噪矛。三九已至嗜浮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間摩疑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評論 1 266
  • 我被黑心中介騙來泰國打工畏铆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留雷袋,地道東北人。 一個月前我還...
    沈念sama閱讀 46,333評論 2 360
  • 正文 我出身青樓辞居,卻偏偏與公主長得像楷怒,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子瓦灶,可洞房花燭夜當晚...
    茶點故事閱讀 43,499評論 2 348

推薦閱讀更多精彩內容

  • VUE Vue :數據驅動的M V Vm框架 m :model(后臺提供數據)鸠删,v :view(頁面),vM(模板...
    wudongyu閱讀 5,389評論 0 11
  • 組件相關鉤子函數: beforeCreate贼陶、created刃泡、beforeMount巧娱、mounted、before...
    744354889606閱讀 19,071評論 0 37
  • 回憶: 我們知道烘贴,h5的history或者hash幫助我們解決了禁添,變化url跳轉頁面不發(fā)送請求,并且我們能監(jiān)聽到u...
    LoveBugs_King閱讀 3,636評論 0 5
  • 學習目的 學習Vue的必備技能桨踪,必須 熟練使用 Vue-router老翘,能夠在實際項目中運用。 Vue-rout...
    _1633_閱讀 91,874評論 3 58
  • 前言 vue-router是什么:是vue.js官方的路由管理器和vue.js的核心深度的集成锻离,讓開發(fā)者更加簡單的...
    GUAN_one閱讀 3,694評論 0 2