在做項(xiàng)目的時(shí)候，遇到需要做路由跳轉(zhuǎn)，但當(dāng)用戶輸入錯(cuò)誤url地址，或是其它非法url路由地址，我們或許會(huì)想到跳轉(zhuǎn)至404頁(yè)面。不管你有沒(méi)有寫(xiě)一個(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)
}
});

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com