眾所周知vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁應用，下面這篇文章主要給大家介紹了關於vue.js中vue- router如何實現無效路由(404)的友善提示的相關資料，需要的朋友可以參考下。
前言
大家都知道對於單頁應用，官方提供了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>上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
在Vue中有關於localstorage和sessionstorage如何使用
#以上是在vue.js中透過vue-router如何實現無效路由提示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
