vue router 跳轉(zhuǎn)未匹配路徑時出現(xiàn)空白頁的問題

在進行vue項目開發(fā)時有梆,常用vue-router進行路由的導航,這種方式可以很好的進行路由和組件的匹配意系,但是當用戶手動更改為未進行匹配的url時泥耀,系統(tǒng)找不到響應(yī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 路由對應(yīng)的地址。

    • next('/') 或者 next({ path: '/' }):跳轉(zhuǎn)到一個不同的地址允懂。當前的導航被中斷厕怜,然后進行一個新的導航。你可以向 next 傳遞任意位置對象,且允許設(shè)置諸如 replace: true粥航、name: 'home' 之類的選項以及任何用在 router-link 的 to proprouter.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)容