解決vue2.0路由跳轉未匹配相應用路由避免出現(xiàn)空白頁面的問題
更新時間：2018年08月24日 15:35:51 作者：huang100qi
今天小編就為大家分享一篇解決vue2.0路由跳轉未匹配相應用路由避免出現(xiàn)空白頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在做項目的時候，遇到需要做路由跳轉，但當用戶輸入錯誤url地址，或是其它非法url路由地址，我們或許會想到跳轉至404頁面。不管你有沒有寫一個404頁面，當出現(xià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('/'); //如果上級也未匹配到路由則跳轉登錄頁面，如果上級能匹配到則轉上級路由
} else {
next(); //如果匹配到正確跳轉
}
});
以上這篇解決vue2.0路由跳轉未匹配相應用路由避免出現(xiàn)空白頁面的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue+Vant 圖片上傳加顯示的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
淺談vue的props，data，computed變化對組件更新的影響
本篇文章主要介紹了淺談vue的props，data，computed變化對組件更新的影響，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
面包屑導航(BreadcrumbNavigation)這個概念來自童話故事“漢賽爾和格萊特”，它的作用是告訴訪問者他們在網站中的位置以及如何返回，本文為大家介紹了實現(xiàn)面包屑導航的正確方式，需要的可以參考一下2023-06-06
如果說是JQuery是手工作坊,那么Vue.js就像是一座工廠,雖然Vue.js做的任何事情JQuery都可以做,但無論是代碼量還是流程規(guī)范性都是前者較優(yōu),這篇文章主要給大家匯總介紹了關于Vue項目中常用的實用技巧,需要的朋友可以參考下2021-07-07
下面小編就為大家?guī)硪黄赩ue生產環(huán)境部署詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了vue基礎之ElementUI的表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue項目打包后上傳至GitHub并實現(xiàn)github-pages的預覽
這篇文章主要介紹了vue項目打包后上傳至GitHub并實現(xiàn)github-pages的預覽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Element?UI/Plus中全局修改el-table默認樣式的解決方案
element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認的樣式,下面這篇文章主要給大家介紹了關于Element?UI/Plus中全局修改el-table默認樣式的解決方案,需要的朋友可以參考下2023-02-02
解決vue-quill-editor上傳內容由于圖片是base64的導致字符太長的問題
vue-quill-editor默認插入圖片是直接將圖片轉為base64再放入內容中，如果圖片較多，篇幅太長，就會比較煩惱，接下來通過本文給大家介紹vue-quill-editor上傳內容由于圖片是base64的導致字符太長的問題及解決方法,需要的朋友可以參考下2018-08-08
Volar 與vetur相同,volar是一個針對vue的vscode插件,下面這篇文章主要給大家介紹了關于Vue3格式化Volar報錯的原因分析與解決方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-06-06