[Vue] ファミリーバケット用の vue-Router

概要

バックエンドルーティング

1. 異なるユーザー URL 要求に従って、異なるコンテンツが返されます。これは、基本的に URL 要求アドレスとサーバー リソース間の対応です。

2. ただし、バックエンドのレンダリングにはパフォーマンスの問題があります。

フロントエンドルーティング

3. Ajax の編集前レンダリングがあるため、フロントエンド レンダリングはパフォーマンスを向上させることができますが、ブラウザーの前後の操作はサポートしていません。

4. このとき、SPA (Single Page Application) シングルページアプリケーションプログラムが再び登場しました。Web サイト全体は 1 ページだけで構成されます。コンテンツの変更は Ajax の部分更新によって実現され、ブラウザの進む、戻る操作をサポートします。アドレスバー。

5. SPA 実装原則の 1 つは、URL アドレスのハッシュに基づいています (ハッシュを変更すると、ブラウザはアクセス履歴の変更を記録しますが、ハッシュの変更によって新しい URL リクエストがトリガーされることはありません)。 。SPA の実装プロセスにおいて、中心的な技術ポイントはフロントエンド ルーティングです。

6. フロントエンドルーティングは、さまざまなユーザーイベントに応じてさまざまなページコンテンツを表示します。本質は、ユーザー イベントとイベント処理関数の対応です。

ルータービュー

公式ドキュメントのリンクはこちらです

Vue Router は、Vue.js の公式ルーティング マネージャーです。Vue.js のコアと深く統合されており、SPA アプリケーションの開発に非常に便利に使用できます。

これは次のように機能します。

1. HTML5 ヒストリー モードまたはハッシュ モードをサポートします。
2. ネストされたルーティングをサポートします。
3. ルーティングパラメータをサポートします。
4. プログラムによるルーティングをサポートします。
5. 名前付きルーティングをサポートします。

インストール

npm install vue-router --save

vue-router の一般的な使用法

ルーティングの遅延読み込み

ルートの遅延読み込みの方法

方法 1: Vue の非同期コンポーネントと Webpack のコード分析を組み合わせる

const Home = resolve => {
    
     require. ensure(['../ components/Home.vue'], () => {
    
     resolve(require('../ components/Home.vue')) })};

方法 2: AMD 書き込み方法

const About = resolve => require([' ../ components/ About.vue'], resolve);

方法 3: ES6 では、Vue 非同期コンポーネントと Webpack のコード分割を整理する簡単な方法が可能です。

const Home = () => import(' . ./ components/Home.vue ' )

ルートの遅延読み込みの影響:

ルートリダイレクション

ルーティング リダイレクトとは、ユーザーがアドレス A にアクセスすると、特定のコンポーネント ページを表示するためにアドレス C に強制的にジャンプすることを指します。

ルーティング ルールのリダイレクト属性を使用して新しいルーティング アドレスを指定すると、ルーティング リダイレクトを簡単に設定できます。

ハッシュが / の場合、デフォルトでホーム コンポーネントにジャンプし、ハッシュが / の場合は何も表示されなくなります。シーンが入力されたばかりのページです。デフォルトでホームページが表示されます

{ path: '*'、component: NotFound } を最後に追加して、上記のルートのいずれにも一致しない場合にこのコンポーネントが表示されることを示すことができます

ネストされたルート

ルーティングによるコンポーネントのネストされた表示は、ネストされたルーティングと呼ばれます。

たとえば、about コンポーネントに表示する必要があるサブコンポーネントが 2 つあります。

サブルート リンクとサブルート プレースホルダーを宣言する

About.vue コンポーネントで、tab1 と tab2 の子ルート リンクと子ルート プレースホルダーを宣言します。サンプルコードは次のとおりです。

Children 属性を使用してサブルーティング ルールを宣言します。
src/router/index.js ルーティング モジュールで、必要なコンポーネントをインポートし、children 属性を使用してサブルーティング ルールを宣言します。 注: サブルーティングのパスは必要ありません

。たす /

動的ルートマッチング

考え方: 次の 3 つのルーティング リンクがあります。

ムービーがパラメータになった後、パラメータに従って対応するデータがムービーコンポーネントにレンダリングされます。

次の 3 つのルーティング ルールを定義することは可能ですか?

欠点: ルーティング ルールの再利用性は低いです。

動的ルーティングの概念

動的ルーティングとは、ハッシュ アドレスの可変部分をパラメータ項目として定義することを指し、これによりルーティング ルールの再利用性が向上します。

vue-routerでは英語のコロン(:)を使用してルートのパラメータ項目を定義します。サンプルコードは次のとおりです。

この場合、/movie/:id はパラメータを渡す必要があり、/movie/:id? はパラメータを渡せないことを意味します

$route.params パラメータ オブジェクト

動的ルートによってレンダリングされるコンポーネントでは、 this.$route.params オブジェクトを使用して、動的に一致するパラメーター値にアクセスできます。これをテンプレートに追加する必要はありません。

props を使用してルートパラメータを受け取る

ルーティング パラメータの取得形式を簡素化するために、vue-router ではルーティング ルールでの props パラメータの受け渡しを有効にすることができます。サンプルコードは次のとおりです。

宣言的ナビゲーションとプログラムによるナビゲーション

宣言型ナビゲーション

ブラウザーでは、リンクをクリックしてナビゲーションを実現することを、宣言的ナビゲーションと呼びます。例えば：

• 通常の Web ページ内のリンクをクリックしたり<a>、Vue プロジェクト内をクリックしたりすることは、<router-link>すべて宣言型ナビゲーションです。

ブラウザにおいて、APIメソッドを呼び出してナビゲーションを実現する方法をプログラマティックナビゲーションと呼びます。例えば：

• 通常の Web ページで location.href を呼び出して新しいページにジャンプするメソッドは、プログラム ナビゲーションに属します。

プログラムによるナビゲーション

router.push は
指定されたハッシュ アドレスにジャンプし、履歴レコードを追加します

this.$router.push() メソッドを呼び出して、指定されたハッシュ アドレスにジャンプし、対応するコンポーネント ページを表示します。サンプル コードは次のとおりです。

router.replace は
、指定されたハッシュ アドレスにジャンプし、現在の履歴レコードを置き換えます。

プッシュと似ていますが、次のような違いがあります。

• 押すと履歴レコードが追加されます
• replace は履歴に追加しませんが、現在の履歴を置き換えます。

router.go は
前後のナビゲーション履歴を実装します

this.$router.go() メソッドを呼び出して、閲覧履歴を前後に移動します。サンプルコードは次のとおりです。

簡略化: 実際の開発では、通常、ページの 1 つのレイヤーのみが前後に移動されます。したがって、vue-router は次の 2 つの便利なメソッドを提供します。

$router.back()

履歴で前のページに戻ります

$router.forward()

履歴で次のページに進みます

ナビゲーションガード

ナビゲーション ガードはルートへのアクセスを制御できます。概略図は次のとおりです。

グローバルフロントガード

ルーティング ナビゲーション ジャンプが発生するたびに、グローバル プレガードがトリガーされます。したがって、グローバル プレガードでは、プログラマは各ルートのアクセス権を制御できます。

ガードメソッドの 3 つの仮パラメータ

グローバル プレガードのコールバック関数は、次の形式で 3 つの仮パラメータを受け取ります。

次の関数を呼び出す 3 つの方法

回路図を参照して、次の関数の 3 つの呼び出しメソッドの最終結果を分析します。

現在のユーザーはバックグラウンドのホームページへのアクセス権を持っており、次のように直接解放できます: next()

現在のユーザーはバックグラウンドのホームページにアクセスできないため、強制的にログイン ページにジャンプします: next('/login')

現在のユーザーはバックグラウンド ホームページにアクセスできず、バックグラウンド ホームページへのジャンプは許可されていません: next(false)

バックグラウンドのホームページへのアクセスを制御する

多くのナビゲーション ガードが必要な場合は、次のアプローチを使用できます。

// 全局前置守卫
router.beforeEach((to, from, next) => {
    
    
	// 要进行导航守卫的路径值
    const pathArr = ['/home','/home/users', '/home/rights']
    if (pathArr.indexOf(to.path) !== -1) {
    
    
        const token = localStorage.getItem('token')
        if (token) {
    
    
            next()
        } else {
    
    
            next('/login')
        }
    } else {
    
    
        next()
    }
})

別の書き方としては、各ルートにメタ設定項目を追加し、メタ内のtrueとfalseの値で判定が必要かどうかを判断する

     {
    
     
        path: 'users',
        component: Users,
        meta: {
    
     isAuth: true },
      },
      ...
      
// 全局前置守卫
router.beforeEach((to, from, next) => {
    
    
    if (to.meta.isAuth) {
    
     // 判断是否需要进行导航守卫
        const token = localStorage.getItem('token')
        if (token) {
    
    
            next()
        } else {
    
    
            next('/login')
        }
    } else {
    
    
        next()
    }
})

ルーティングの 2 つの動作モード

ハッシュモード

• デフォルトでは、ハッシュの動作モードが有効になっています。
• #これはハッシュを意味し、その後にハッシュ値が続きます
• 注: # 以降の値はサーバーに送信されません

履歴モード

履歴モードを有効にするには、モード設定項目を追加する必要があります。デフォルトは

# なしのハッシュ履歴です。

ハッシュとヒストリーの違い

ハッモード

• 住所には常に # 記号があり、美しくありません
• 将来、アドレスがサードパーティのモバイル アプリを通じて共有される場合、アプリに厳格な検証があれば、そのアドレスは違法としてマークされます。
• 良い互換性

履歴モード

• 住所は清潔で美しいです
• 互換性はハッシュ モードよりわずかに悪い
• 
  アプリケーションがオンラインで展開される場合、ページ サーバー 404 (たとえば、http://localhost:8080/home/message、元々は http://localhost:8080) の更新の問題を解決するには、バックエンド担当者のサポートが必要です。、クリックしてメッセージ ページに移動すると、パスが変更され、更新時のパスは http://localhost:8080/home/message のままで、/home/message もサーバーに送信されますが、人々 http://localhost:8080 のみがわかります。ハッシュは http://localhost:8080/#/home/message のようになりません。# 以降は何もサーバーに送信されないためです)

ソース

Vue-router ルーティングの超詳細なチュートリアル
Vue-router
ルーティングを簡単に理解できる vue-router の詳細な説明記事