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

看代碼紅色部分

import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'Vue.use(Router)let routes = [ { path: '/', name: 'Login', component: Login }, { path: '/login', name: 'Login', component: Login }, { path: '/index', name: 'Index',  component: Hello, }];const router = new Router({ history: true, routes : routes});

重點如下：

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

以上這篇解決vue2.0路由跳轉(zhuǎn)未匹配相應(yīng)用路由避免出現(xiàn)空白頁面的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。