2種方式解決vue路由跳轉未匹配相應路由避免出現空白頁面或者指定404頁面

1、路由全局守衛

　　在做項目的時候，遇到需要做路由跳轉，但當用戶輸入錯誤url地址，或是其它非法url路由地址，我們或許會想到跳轉至404頁面。不管你有沒有寫一個404頁面，當出現未匹配路由都需重新指定頁面跳轉。可能大家首先想到會是路由重定向，redirect來解決這個問題。但實際上通過redirect是沒辦法更好解決這個問題的。看代碼紅色部分

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

2、重定向

　　有時，我們可能會輸入錯的 url， 或者不再存在等各種原因導致其不再能被訪問，那么我們就可以對於這種情況進行重定向。 很簡單，只要在路由中添加下面的代碼就可以了：

//創建路由對象並配置路由規則
let router = new VueRouter({ routes:[ {path:'/',redirect:{name:"home"}},  // 重定向到主頁
       {name:'home',path:'/home',component:Home}, {path:'/music',component:Music}, {path:'/movie',component:Movie}, {name:'img',path:'/picture22',component:Picture}, {name:'musicDetail',path:'/musicDetail/:id/:name',component:MusicDetail}, {path:'*',component:NotFound},//全不匹配的情況下，返回404，路由按順序從上到下，依次匹配。最后一個*能匹配全部， ] });

　　或者下面這樣，注意放到最后

{ path: "*", redirect: "/" }

　　即對於所有的（*代表所有）錯誤頁面，我們都可以重定向到 "/" 中。