vue-router 實現無效路由(404)的友好提示

最近在作一個基於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要多友好就看本身了[惹不起]