解決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)有寫(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue+Vant 圖片上傳加顯示的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
淺談vue的props，data，computed變化對(duì)組件更新的影響
本篇文章主要介紹了淺談vue的props，data，computed變化對(duì)組件更新的影響，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue實(shí)現(xiàn)面包屑導(dǎo)航的正確方式
面包屑導(dǎo)航(BreadcrumbNavigation)這個(gè)概念來(lái)自童話故事“漢賽爾和格萊特”，它的作用是告訴訪問(wèn)者他們?cè)诰W(wǎng)站中的位置以及如何返回，本文為大家介紹了實(shí)現(xiàn)面包屑導(dǎo)航的正確方式，需要的可以參考一下2023-06-06
如果說(shuō)是JQuery是手工作坊,那么Vue.js就像是一座工廠,雖然Vue.js做的任何事情JQuery都可以做,但無(wú)論是代碼量還是流程規(guī)范性都是前者較優(yōu),這篇文章主要給大家匯總介紹了關(guān)于Vue項(xiàng)目中常用的實(shí)用技巧,需要的朋友可以參考下2021-07-07
下面小編就為大家?guī)?lái)一篇基于Vue生產(chǎn)環(huán)境部署詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)之ElementUI的表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
vue項(xiàng)目打包后上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽
這篇文章主要介紹了vue項(xiàng)目打包后上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案
element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認(rèn)的樣式,下面這篇文章主要給大家介紹了關(guān)于Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案,需要的朋友可以參考下2023-02-02
解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題
vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片較多，篇幅太長(zhǎng)，就會(huì)比較煩惱，接下來(lái)通過(guò)本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題及解決方法,需要的朋友可以參考下2018-08-08
Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決
Volar 與vetur相同,volar是一個(gè)針對(duì)vue的vscode插件,下面這篇文章主要給大家介紹了關(guān)于Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06