vue-router 實現無效路由(404)的友好提示
阿新 • • 發佈：2018-11-15
最近在做一個基於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要多友好就看自己了[惹不起]