解決vue2.0路由跳轉(zhuǎn)未匹配相應(yīng)用路由避免出現(xiàn)空白頁(yè)面的問(wèn)題
在做項(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)
}
});
以上這篇解決vue2.0路由跳轉(zhuǎn)未匹配相應(yīng)用路由避免出現(xiàn)空白頁(yè)面的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫效果實(shí)例詳解
最近在寫vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過(guò)渡的效果,雖然vue動(dòng)畫不是強(qiáng)項(xiàng),庫(kù)也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue進(jìn)度條組件實(shí)現(xiàn)代碼(可拖拽可點(diǎn)擊)
在日常開(kāi)發(fā)中隨著需求的個(gè)性化,邏輯的復(fù)雜化,自定義組件也變得越來(lái)越常見(jiàn),這篇文章主要給大家介紹了關(guān)于vue進(jìn)度條組件實(shí)現(xiàn)(可拖拽可點(diǎn)擊)的相關(guān)資料,需要的朋友可以參考下2023-12-12
如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟
這篇文章主要介紹了如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹 Vue3組件傳參的方式,包括父子組件、跨層級(jí)組件、兄弟組件的傳參,如父子組件通過(guò)屬性綁定和自定義事件雙向傳參,跨層級(jí)組件可利用 Provide/Inject 機(jī)制和 Pinia 狀態(tài)管理,兄弟組件可通過(guò)父組件中轉(zhuǎn)或 mitt 庫(kù)直接傳參,需要的朋友可以參考下2025-01-01
Vue簡(jiǎn)明介紹配置對(duì)象的配置選項(xiàng)
我們知道每一個(gè)vue項(xiàng)目應(yīng)用都是通過(guò)vue的構(gòu)造函數(shù)進(jìn)行創(chuàng)建一個(gè)新的vue項(xiàng)目的。創(chuàng)建vue實(shí)例的配置對(duì)象，可以包括一下屬性選項(xiàng)，比如：data、methods、watch、template等等，每一個(gè)選項(xiàng)都有不同的功能，大家可以根據(jù)自己的需求選擇不同的配置2022-08-08
Vue(element ui)中操作row參數(shù)的使用方式
這篇文章主要介紹了Vue(element ui)中操作row參數(shù)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
再做前端頁(yè)面的時(shí)候,想獲取本地的ip地址,可能是為了和服務(wù)器通信,可能是為了展示,無(wú)論哪種,下面給大家總結(jié)下方法,這篇文章主要給大家介紹了關(guān)于vue前端獲取本地IP地址的相關(guān)資料,需要的朋友可以參考下2024-05-05
在vue中實(shí)現(xiàn)PDF文件流預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹如何在vue中實(shí)現(xiàn)PDF文件流預(yù)覽功能,文中的實(shí)現(xiàn)步驟講解詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值,需要的可以參考一下2023-12-12
element-ui修改el-form-item樣式的詳細(xì)示例
在使用element-ui組件庫(kù)的時(shí)候經(jīng)常需要修改原有樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui修改el-form-item樣式的詳細(xì)示例,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解vue的diff算法原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05