溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
大家都知道對于單頁應用，官方提供了vue-router進行路由跳轉的處理，而最近在做一個基于vue-router的SPA，想對無效路由(404)頁面做下統一處理。
這次我真的沒有在官方文檔找到具體的說明[捂臉]
所以本文僅是我DIY的一個思路，求輕虐=_=
在我的理解中，vue-router是根據path去匹配注冊的route，匹配到則加載對應的組件，匹配不到則重置(或者說清空)對應的router-view。
所以，我們不做處理的話，最終頁面展示的是一片空白。
那么，我們是不是可以在路由匹配上做文章呢？
路由監測
在組件中，可以從this.$route獲取當前路由，那么就可以使用watch監測路由的變化，監測所有路由變化自然而然的落在根路由組件(如：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要多友好就看自己了
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
