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