vue.js vue-router提升使用者體驗

這次帶給大家vue.js vue-router提升使用者體驗，vue.js vue-router提升使用者體驗的注意事項有哪些，以下就是實戰案例，一起來看一下。

前言

大家都知道對於單頁應用，官方提供了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要多友善就看自己了

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

移動元件庫cube-ui使用詳解

#nodejs如何呼叫微信分享功能

#

以上是vue.js vue-router提升使用者體驗的詳細內容。更多資訊請關注PHP中文網其他相關文章！