這篇文章將為大家詳細(xì)講解有關(guān)如何解決vue2.0路由跳轉(zhuǎn)未匹配相應(yīng)用路由避免出現(xiàn)空白頁(yè)面的問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到貢井網(wǎng)站設(shè)計(jì)與貢井網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋貢井地區(qū)。

在做項(xiàng)目的時(shí)候，遇到需要做路由跳轉(zhuǎn)，但當(dāng)用戶輸入錯(cuò)誤url地址，或是其它非法url路由地址，我們或許會(huì)想到跳轉(zhuǎn)至404頁(yè)面。不管你有沒(méi)有寫一個(gè)404頁(yè)面，當(dāng)出現(xiàn)未匹配路由都需重新指定頁(yè)面跳轉(zhuǎn)?？赡艽蠹沂紫认氲綍?huì)是路由重定向，redirect來(lái)解決這個(gè)問(wèn)題。但實(shí)際上通過(guò)redirect是沒(méi)辦法更好解決這個(gè)問(wèn)題的。

看代碼紅色部分

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
});

重點(diǎn)如下：

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

關(guān)于“如何解決vue2.0路由跳轉(zhuǎn)未匹配相應(yīng)用路由避免出現(xiàn)空白頁(yè)面的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

標(biāo)題名稱：如何解決vue2.0路由跳轉(zhuǎn)未匹配相應(yīng)用路由避免出現(xiàn)空白頁(yè)面的問(wèn)題-創(chuàng)新互聯(lián)
標(biāo)題URL：http://weahome.cn/article/dpjses.html