溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue.js vue-router如何實(shí)現(xiàn)無效路由(404)的友好提示

發(fā)布時(shí)間：2020-09-02 03:05:30 來源：腳本之家 閱讀：471 作者：JasonScript 欄目：web開發(fā)

前言

大家都知道對(duì)于單頁(yè)應(yīng)用，官方提供了vue-router進(jìn)行路由跳轉(zhuǎn)的處理，而最近在做一個(gè)基于vue-router的SPA，想對(duì)無效路由(404)頁(yè)面做下統(tǒng)一處理。

這次我真的沒有在官方文檔找到具體的說明[捂臉]

所以本文僅是我DIY的一個(gè)思路，求輕虐=_=

在我的理解中，vue-router是根據(jù)path去匹配注冊(cè)的route，匹配到則加載對(duì)應(yīng)的組件，匹配不到則重置(或者說清空)對(duì)應(yīng)的router-view。

所以，我們不做處理的話，最終頁(yè)面展示的是一片空白。

那么，我們是不是可以在路由匹配上做文章呢？

路由監(jiān)測(cè)

在組件中，可以從this.$route獲取當(dāng)前路由，那么就可以使用watch監(jiān)測(cè)路由的變化，監(jiān)測(cè)所有路由變化自然而然的落在根路由組件(如：App.vue)上面了。

無效路由檢測(cè)

$route.matched包含了當(dāng)前路由的匹配結(jié)果，如果為空則說明當(dāng)前路由無效。

界面提示

可使用條件渲染，路由有效則渲染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要多友好就看自己了

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手