vue.js vue-router如何實(shí)現(xiàn)無(wú)效路由(404)的友好提示
前言
大家都知道對(duì)于單頁(yè)應(yīng)用，官方提供了vue-router進(jìn)行路由跳轉(zhuǎn)的處理，而最近在做一個(gè)基于vue-router的SPA，想對(duì)無(wú)效路由(404)頁(yè)面做下統(tǒng)一處理。
這次我真的沒(méi)有在官方文檔找到具體的說(shuō)明[捂臉]
所以本文僅是我DIY的一個(gè)思路，求輕虐=_=
在我的理解中，vue-router是根據(jù)path去匹配注冊(cè)的route，匹配到則加載對(duì)應(yīng)的組件，匹配不到則重置(或者說(shuō)清空)對(duì)應(yīng)的router-view。
所以，我們不做處理的話(huà)，最終頁(yè)面展示的是一片空白。
那么，我們是不是可以在路由匹配上做文章呢？
路由監(jiān)測(cè)
在組件中，可以從this.$route獲取當(dāng)前路由，那么就可以使用watch監(jiān)測(cè)路由的變化，監(jiān)測(cè)所有路由變化自然而然的落在根路由組件(如：App.vue)上面了。
無(wú)效路由檢測(cè)
$route.matched包含了當(dāng)前路由的匹配結(jié)果，如果為空則說(shuō)明當(dāng)前路由無(wú)效。
界面提示
可使用條件渲染，路由有效則渲染router-view，路由無(wú)效則渲染提示信息。
Demo
App.vue
<template>
<p v-if="invalidRoute">404</p>
<router-view v-else></router-view>
</template>
<script type="text/babel">
export default {
name: 'App',
computed: {
invalidRoute () {
return !this.$route.matched || this.$route.matched.length === 0;
}
}
};
</script>
至于404要多友好就看自己了
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
對(duì)于前后端分離的項(xiàng)目,為了統(tǒng)一響應(yīng)參數(shù),需要將圖片轉(zhuǎn)換成base64的格式,下面這篇文章主要給大家介紹了關(guān)于vue圖片轉(zhuǎn)base64格式的相關(guān)資料,需要的朋友可以參考下2022-12-12
為Vue3?組件標(biāo)注?TS?類(lèi)型實(shí)例詳解
這篇文章主要為大家介紹了為Vue3?組件標(biāo)注?TS?類(lèi)型實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁(yè)功能
這篇文章主要介紹了Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁(yè)功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
下面小編就為大家分享一篇完美解決axios在ie下的兼容性問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
這篇文章主要介紹了詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例
我們經(jīng)常需要在Vue搭建的后臺(tái)管理系統(tǒng)里進(jìn)行數(shù)據(jù)導(dǎo)入導(dǎo)出等操作,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件
這篇文章主要介紹了vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
Vue3.x+Element Plus仿制Acro Design簡(jiǎn)潔模式實(shí)現(xiàn)分頁(yè)器組件
開(kāi)發(fā)中難免會(huì)遇到寬度很窄的列表需要使用分頁(yè)器的情況。本文將利用Vue3.x+Element Plus仿制Acro Design簡(jiǎn)潔模式實(shí)現(xiàn)分頁(yè)器組件，感興趣的可以了解一下2023-02-02
這篇文章主要介紹了vue中watch的用法匯總，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03