vue路由跳轉(zhuǎn)路徑錯誤時出現(xiàn)空白頁

參考解決vue路由跳轉(zhuǎn)未匹配路徑時出現(xiàn)空白頁的問題
在進行vue項目開發(fā)時手报,常用vue-router進行路由的導航缭召,這種方式可以很好的進行路由和組件的匹配负拟,但是當用戶手動更改為未進行匹配的url時轧膘,系統(tǒng)找不到響應的組件進行頁面渲染,就會出現(xiàn)空白頁面悔醋。這種用戶體驗并不好,下面總結(jié)解決該問題的方法兽叮。

1.導航守衛(wèi)

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

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

當一個導航觸發(fā)時芬骄,全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行鹦聪,此時導航在所有守衛(wèi) resolve 完之前一直處于 等待中账阻。
每個守衛(wèi)方法接收三個參數(shù):

  • to: Route: 即將要進入的目標 路由對象
  • from: Route: 當前導航正要離開的路由
  • next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)泽本。
    • next(): 進行管道中的下一個鉤子淘太。如果全部鉤子執(zhí)行完了,則導航的狀態(tài)就是 confirmed (確認的)规丽。
    • next(false): 中斷當前的導航蒲牧。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應的地址嘁捷。
    • next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址造成。當前的導航被中斷,然后進行一個新的導航雄嚣。你可以向 next 傳遞任意位置對象晒屎,且允許設置諸如 replace: true喘蟆、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
    • next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例鼓鲁,則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)蕴轨。
      確保要調(diào)用 next 方法,否則鉤子就不會被 resolved骇吭。

利用該特性橙弱,可以使用下面的代碼端解決未匹配路由的問題:

router.beforeEach((to, from, next) => {
  if (to.matched.length ===0) {  //如果未匹配到路由
    from.path? next({ path:from.path}) : next('/');   //如果上級也未匹配到路由則跳轉(zhuǎn)主頁面,如果上級能匹配到則轉(zhuǎn)上級路由
  } else {
    next();    //如果匹配到正確跳轉(zhuǎn)
  }
});

2.匹配所有路由

路由的匹配規(guī)則是按照書寫的順序執(zhí)行的燥狰,第一條匹配成功則不去匹配下一條棘脐,利用這一特性,可以在所有匹配路由的下面攔截匹配所有路由:

//創(chuàng)建路由對象并配置路由規(guī)則
let router = new VueRouter({
    routes:[
       {path:'/',redirect:{name:"home"}},  // 重定向到主頁
       {name:'home',path:'/home',component:Home},
       {name:'login',path:'/login',component:Login},
       {path:'*',component:NotFound},//全不匹配的情況下龙致,匹配NotFound組件蛀缝,路由按順序從上到下,依次匹配目代。最后一個*能匹配全部屈梁,
    ]
});

3.重定向

原理同方法2,只不過在匹配到*時榛了,重定向到根路徑:

//創(chuàng)建路由對象并配置路由規(guī)則
let router = new VueRouter({
    routes:[
       {path:'/',redirect:{name:"home"}},  // 重定向到主頁
       {name:'home',path:'/home',component:Home},
       {name:'login',path:'/login',component:Login},
       {path:'*',redirect:'/'},//路由按順序從上到下在讶,依次匹配。最后一個*能匹配全部霜大,然后重定向到主頁面
    ]
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末构哺,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子僧诚,更是在濱河造成了極大的恐慌遮婶,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件湖笨,死亡現(xiàn)場離奇詭異旗扑,居然都是意外死亡,警方通過查閱死者的電腦和手機慈省,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門臀防,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人边败,你說我怎么就攤上這事袱衷。” “怎么了笑窜?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵致燥,是天一觀的道長。 經(jīng)常有香客問我排截,道長嫌蚤,這世上最難降的妖魔是什么辐益? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮脱吱,結(jié)果婚禮上智政,老公的妹妹穿的比我還像新娘。我一直安慰自己箱蝠,他們只是感情好续捂,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著宦搬,像睡著了一般牙瓢。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上间校,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天一罩,我揣著相機與錄音,去河邊找鬼撇簿。 笑死,一個胖子當著我的面吹牛差购,可吹牛的內(nèi)容都是我干的四瘫。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼欲逃,長吁一口氣:“原來是場噩夢啊……” “哼找蜜!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起稳析,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤洗做,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后彰居,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诚纸,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年陈惰,在試婚紗的時候發(fā)現(xiàn)自己被綠了畦徘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡抬闯,死狀恐怖井辆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情溶握,我是刑警寧澤杯缺,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站睡榆,受9級特大地震影響萍肆,放射性物質(zhì)發(fā)生泄漏袍榆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一匾鸥、第九天 我趴在偏房一處隱蔽的房頂上張望蜡塌。 院中可真熱鬧,春花似錦勿负、人聲如沸馏艾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽琅摩。三九已至,卻和暖如春锭硼,著一層夾襖步出監(jiān)牢的瞬間房资,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工檀头, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留轰异,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓暑始,卻偏偏與公主長得像搭独,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子廊镜,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

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

  • VUE Vue :數(shù)據(jù)驅(qū)動的M V Vm框架 m :model(后臺提供數(shù)據(jù))牙肝,v :view(頁面),vM(模板...
    wudongyu閱讀 5,411評論 0 11
  • 前言 vue-router是什么:是vue.js官方的路由管理器和vue.js的核心深度的集成嗤朴,讓開發(fā)者更加簡單的...
    GUAN_one閱讀 3,718評論 0 2
  • 學習目的 學習Vue的必備技能配椭,必須 熟練使用 Vue-router,能夠在實際項目中運用雹姊。 Vue-rout...
    _1633_閱讀 92,244評論 3 58
  • 這是我第5篇簡書吱雏。 ??由于Vue在開發(fā)時對路由支持的不足乓序,于是官方補充了vue-router插件。vue的單頁面...
    東西里閱讀 45,478評論 20 212
  • 回憶: 我們知道坎背,h5的history或者hash幫助我們解決了替劈,變化url跳轉(zhuǎn)頁面不發(fā)送請求,并且我們能監(jiān)聽到u...
    LoveBugs_King閱讀 3,650評論 0 5