vue.js の vue-router を介して無効なルーティング プロンプトを実装する方法

ご存知のとおり、vue-router は Vue.js の公式ルーティング プラグインであり、vue.js と深く統合されており、シングルページ アプリケーションの構築に適しています。次の記事では主に vue の使用方法を紹介します。 vue.js の -router。必要な友人は、無効なルーティング (404) に関するフレンドリー プロンプトに関する関連情報を参照できます。

はじめに

シングルページアプリケーションの場合、ルートジャンプ処理用に公式の vue-router が提供されていることは誰もが知っています。最近、私は vue-router に基づいた SPA に取り組んでおり、無効なルーティングに対処したいと考えています。 (404) ページを統合処理します。

今回は公式文書[フェイスカバー]に具体的な指示が本当に見つかりませんでした

したがって、この記事は単なるDIYのアイデアです、ご容赦ください=_=

私の理解では、vue-routerに基づいています。パスが登録されたルートと一致する場合、対応するコンポーネントがロードされます。一致しない場合、対応するルータービューがリセット (またはクリア) されます。

つまり、何も処理しないと、最後のページは空白になります。

それではルートマッチングについて大騒ぎしてもいいでしょうか？

ルート監視

コンポーネントでは、this.$route から現在のルートを取得でき、その後、watch を使用してルート変更を監視できます。すべてのルート変更の監視は、当然ルート ルーティング コンポーネント (例: App.ビュー）。

無効なルート検出

$route.matchedには、現在のルートのマッチング結果が含まれます。空の場合、現在のルートは無効です。

インターフェースプロンプト

は、ルートが有効な場合はルータービューがレンダリングされ、ルートが無効な場合はプロンプトメッセージがレンダリングされます。

Demo

App.vue

<template>
 <p v-if="invalidRoute">404</p>
 <router-view v-else></router-view>
</template>
<script type="text/babel">
 export default {
 name: &#39;App&#39;,
 computed: {
  invalidRoute () {
  return !this.$route.matched || this.$route.matched.length === 0;
  }
 }
 };
</script>

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。

関連記事:

JavaScriptでオブジェクトの値をマージする方法について

Angularで検証を実装する方法

Angularでテーブルソートを実装する方法

localstorageとVueについて 使い方セッションストレージ

ジャクソンがjson文字列を解析する方法について

jsでローカルファイルを読み取る方法

以上がvue.js の vue-router を介して無効なルーティング プロンプトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。