參考：解決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:'/'},//路由按順序從上到下在讶，依次匹配。最后一個*能匹配全部霜大，然后重定向到主頁面
]
});
