在進行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 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:'/'},//路由按順序從上到下伪嫁,依次匹配领炫。最后一個*能匹配全部,然后重定向到主頁面
]
});