VueのルーティングとVuex

VUEルート

VUE-ルータ2

注意：[email protected]はVue2.xバージョンに適用されます

インストール

1.使用することもできます。<script srcは= "../のJS / VUE-router.js"> </ SCRIPT> この方法で導入しますが、一般的にモジュラーアプローチのWebPACKを使用する傾向があります

2. NPM [email protected] --save-devのインストール --save-devのに続いて、ログが付いpackage.jsonを可能にするために、

あなたはモジュラープロジェクトを使用する場合は、）（Vue.use明示のようなルーティング機能を、インストールする必要があります。

        「表示」からインポートビュー。
        以下からの輸入VueRouter「VUE-ルータの。
        Vue.use（VueRouter）

あなたはグローバルなスクリプトタグを使用する場合は、あなたが必要としない（手動インストール）

リダイレクト

リダイレクションは、次の/ Bに/で、経路の構成により達成されます

        constのルータ= 新しいVueRouter（{
            ルート：[{
                パス： '/ A'、リダイレクト： '/ B'
            }]
        }）

リダイレクトがまたしてルートの各ルートを命名することができます

        constのルータ= 新しいVueRouter（{
            ルート：[{
                パス： '/ A'は、リダイレクト：{名： 'foo'を}
            }]
        }）

または方法

        constのルータ= 新しいVueRouter（{
            ルート：[{
                パス：「/ A」、リダイレクト：へ=> {
                     // ターゲット経路パラメータの方法は、受信
                    // 返すまたはオブジェクトパス文字列のパスをリダイレクト
                }
            }]
        }）

あなたは、プッシュボタンのジャンプを使用することができます

<=「/カード」へのルータ・リンク>カード</ルータリンク>

道やjsの方法をジャンプ

ダイナミックルーティングの試合

イベントをクリックします

handleClick：関数（指数）{

あなたはジャンプを参照して来る必要//ルータ

router.push（ `/カード/ディテール/ $ {索引}`）; // ES6バッククォートが書き込ま、

}

IDのプレースホルダ記号：パス：「/カード/ディテール/：ID」、前とIDが一致するか否かを受信値IDを命名した後、両方の

ID値を受信する：{{$ route.params.id}}、

HTML5の履歴モード

VUE-ルータのデフォルトのハッシュモード - URLの完全なハッシュをシミュレートするためにURLを使用するので、URLの変更は、ページがリロードしないとき。

あなたは醜いハッシュモードにしたくない場合は、我々はまた、ルートパターンの履歴を使用することができ、このパターンは、ページをリロードすることなく、ジャンプを完了するために、history.pushState API URLをフルに活用します

ルータモードでは、次の次index.jsに追加されますので、＃記号のアドレスバーを削除し、「歴史」、

私たちのアプリケーションは、単一ページのクライアントアプリケーションであるため、バックグラウンドが正しい設定でない場合は、このモードはうまく再生するには、あなたは、支持の背景を設定する必要がある場合、ブラウザへのユーザーの直接アクセスhttp://oursite.com/user/ IDが404の外にジャンプしますので、経験が悪いです。

だから、あなたはすべての状況をカバーするために、サーバー側の候補リソースを追加したい：URLは任意の静的リソースと一致した場合、あなたはあなたのアプリページに依存している同じindex.htmlのページを返す必要があります。

Vuex

Vuexは、特別に予測可能な方法が変更を保証するために、すべてのいくつかのストレージ管理アプリケーションの状態の構成要素、および対応する状態のルールを使用するアプリケーション状態管理Vue.jsモードのために開発されています。Vuex Vueのも、公式の転送ツールのdevtool延長に統合され、そのようなゼロコンフィギュレーションとしてタイムトラベル調整式、インポートおよびエクスポートおよびその他の高度なデバッグ機能の状態のスナップショットを提供しています。

Vuexは、私たちが共有状態の管理を支援することができますが、それはまた、短期的および長期的な利益と比較考量する必要がより多くの概念やフレームワーク、付属していますが。

あなたは、大規模な単一ページのアプリケーションを開発する予定がない場合は、Vuexの冗長化を使用するために煩雑になる可能性があり、世界的なイベントバスを使用して、簡単なアプリケーションでは、十分な需要があり、かつ

インストール

NPMインストールvuex --save

1.state：状態の単一数は、各アプリケーションは、ストアインスタンスが含まれています。

この。$ STORE.STATE。状態名

... mapState（[ 'タイトル']）

2.gettersは：ストア内の状態の状態数から誘導することができます

1.計算は、プロパティストアと考えることができます

2.この。$ Store.getters。計算された属性名

3. ... mapGetters（[ 'getFilms']）

3.mutations：Vuexに店舗を変更する唯一の方法は、提出の状態になっています

一定の関与スタイル

[SOME_MUTATION]（状態）{

状態を変異//

}

あなたは、機能を同期させる必要があります

この。$のstore.commit（ 'タイプ'、 'ペイロード'）

4.actions

1.Actionは直接の状態を変更するのではなく、突然変異を提出し、

これは、任意の非同期操作の2.Actionを含むことができ、

3.この。$のstore.dispatch（ 'タイプ'、 'ペイロード'）

5. CONSTストア=新しいVuex.Store（{

状態：{

カウント：0

}、

変異：{

インクリメント（状態、ペイロード）{

}

}、

行動：{

}

}）

おすすめ