vue.js vue-router如何實現(xiàn)無效路由(404)的友好提示
更新時間：2017年12月20日 09:34:24 作者：JasonScript
眾所周知vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用，下面這篇文章主要給大家介紹了關于vue.js中vue-router如何實現(xiàn)無效路由(404)的友好提示的相關資料，需要的朋友可以參考下。
前言
大家都知道對于單頁應用，官方提供了vue-router進行路由跳轉(zhuǎn)的處理，而最近在做一個基于vue-router的SPA，想對無效路由(404)頁面做下統(tǒng)一處理。
這次我真的沒有在官方文檔找到具體的說明[捂臉]
所以本文僅是我DIY的一個思路，求輕虐=_=
在我的理解中，vue-router是根據(jù)path去匹配注冊的route，匹配到則加載對應的組件，匹配不到則重置(或者說清空)對應的router-view。
所以，我們不做處理的話，最終頁面展示的是一片空白。
那么，我們是不是可以在路由匹配上做文章呢？
路由監(jiān)測
在組件中，可以從this.$route獲取當前路由，那么就可以使用watch監(jiān)測路由的變化，監(jiān)測所有路由變化自然而然的落在根路由組件(如：App.vue)上面了。
無效路由檢測
$route.matched包含了當前路由的匹配結果，如果為空則說明當前路由無效。
界面提示
可使用條件渲染，路由有效則渲染router-view，路由無效則渲染提示信息。
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要多友好就看自己了
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要給大家介紹了關于vue導出報表至excel表格的三種方式,導出報表是實際開發(fā)的常見功能,前后端都可以實現(xiàn)表格導出,本文介紹的是用vue實現(xiàn),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue+Vant 圖片上傳加顯示的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue中$refs的用法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-06-06
指令是Vue模板中最常用的一項功能，它帶有前綴v-，主要職責是當其表達式的值改變時，相應的將某些行為應用在 DOM 上。這篇文章主要介紹了vue內(nèi)置指令詳解,需要的朋友可以參考下2018-04-04
眾所周知,當容器高度固定而內(nèi)容部分高度超出容器高度時,瀏覽器會渲染出一個可以滾動并用于顯示剩余界面的條 -- 滾動條,它可以簡單的樣式修改,但是位置是固定的,無法移動,而我們需要改變位置的時候,它就不能滿足我們的需求了,這時我們可以自己手寫一個2023-10-10
這篇文章主要介紹了uni-app 的自定義組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Vue?3?使用moment設置顯示時間格式的問題及解決方法
在Vue?3中,因為過濾器(filter)已經(jīng)被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設置顯示時間格式的問題及解決方法,感興趣的朋友一起看看吧2023-12-12
這篇文章主要給大家介紹了關于如何通過shell腳本自動生成vue文件的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10