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