vue.js vue-router はユーザー エクスペリエンスを向上させます

今回は、ユーザー エクスペリエンスを向上させるための vue.js vue-router について説明します。vue.js vue-router がユーザー エクスペリエンスを向上させるために使用できる notes について、実際のケースを見てみましょう。

はじめに

ご存知のとおり、シングルページ アプリケーションの場合、routingjump を処理するために公式の vue-router が提供されています。最近、vue-router ベースの SPA に取り組んでおり、無効なルーティング (404) を均一に処理したいと考えています。ページ。

今回は、公式ドキュメント [フェイスカバー] に特に具体的な指示が見つかりませんでした

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

私の理解では、vue-routerはパスに従って登録されたルートと一致し、一致しない場合は対応するルータービューをリセット（またはクリア）します。

そのため、処理を行わないと最終ページが白紙になってしまいます。

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

ルート監視

コンポーネントでは、this.$route から現在のルートを取得でき、その後、watch を使用してルートの変更を監視できます。すべてのルートの変更の監視は、当然ルート ルーティング コンポーネント (App.vue など) で行われます。

無効なルート検出

$route.matched には、現在のルートの一致結果が含まれます。これが空の場合、現在のルートは無効です。

インターフェースのヒント

条件付きレンダリングを使用できます。ルートが有効な場合はルーター ビューがレンダリングされ、ルートが無効な場合はプロンプト メッセージが表示されます。

デモ

App.vue

rreee

404 がどれだけフレンドリーであるかはあなた次第です

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

モバイルコンポーネントライブラリcube-uiの使用方法の詳細な説明

nodejsでWeChat共有機能を呼び出す方法

以上がvue.js vue-router はユーザー エクスペリエンスを向上させますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。