VUEルータ機能：
ネストされたルーティング/ビューテーブル
の構成に基づいてモジュラー/ルーティングコンポーネント
ルーティングパラメータ/クエリ/ワイルドカード
ベースビューシステム遷移vue.js遷移
グレインナビゲーション制御
の自動起動CSSクラスとのリンク
H5履歴パターンやハッシュモードでIE9での自動降格
の動作をカスタマイズするには、スクロールバー
<ルータ・ビューを>最も先進的なルーティングを一致させるためにコンポーネントをレンダリングし、トップの輸出です。同様に、成分は、それ自体をレンダリングすることができるネストされた<ルータビュー>含む
ルートパスであるように、経路は、ネストされたネストされたパスを使用して提供される必要はない/から始まるネストされたパス。
ルータパラメータ渡しモード：ルートマッチングパラメータ、クエリパラメータ渡しモード、モードを渡すParamsパラメータは、
（1）動的ルーティング、ルートマッチングパラメータと一致：
//動的パスコロンに先行パラメータ
{パス：「/ユーザ/： IDを」、成分：ユーザー}
//取得パラメータは、
名前=この$のroute.params.idせ; //リンクでは、ID $にカプセル化され、これは... route.params
（2）クエリ
このrouter.pushの$（「/ログイン/を。 「+ this.id）;
。$はこれをroute.query.id
。この$ router.push（{
： '/支払い/充電'、パス
クエリ：{
金額：that.amount
}
}）を、
このroute.query.amount $は。
へのリンク後の伝送パラメータを追加することができますか？
のhttp：ローカルホスト//：8080 / ID = 18である
。この$のroute.query.id
（3）paramsは
この$のrouter.push。（{
名： '確認画像'、
paramsは：{
AMOUNT：that.amount
}
}）
この。 route.params.amountする$
PS：設け、パス場合、paramsは無視される
$ルートルータ&& $
：$ルータ、ルーティングのための例示的なルータは、ジャンプ
（1）本の$ router.push（{
パス：「/支払い/充電」、
クエリ：{
AMOUNT：that.amount
}
}）;
（2）この$のrouter.push（{
名： '確認画像'、
paramsは：{
AMOUNT：that.amount
}
}）
$経路：経路情報オブジェクトが現在得るために、活性化パラメータは、
（1）本の$ route.query.amount。
（2）本の$ route.params.amount。
入れ子経路：
CONST =新しい新しいルータVueRouter（{
ルート：[
{パス： '/ユーザー/：ID'、コンポーネントユーザー：
子供：[
{
//場合/ユーザ/：ID /プロファイルマッチングが成功し、
//のUserProfileユーザの<ルータビュー>でレンダリングされる
「プロフィール」、：パス
：コンポーネントのUserProfile
、}
{
// IF /ユーザ/：ID /成功に一致する記事
// UserPostsがユーザー<ルータビュー>でレンダリングされる
パス： '投稿'、
コンポーネント：UserPosts
}
]
}
]
}）
プログラムされたナビゲーション：
ナビゲーション：
（1）<ルータ-link>タグを作成するために定義されていますナビゲーションリンク（宣言型ナビゲーション）
（2）router.push（LOCATION、onCompleteの?, OnAbort？）（プログラムによるナビゲーション）
（3）router.replace（LOCATION、onCompleteの?, OnAbort？）（プログラムによるナビゲーション）
（3） router.go（N）（プログラミングナビゲーション）
PS：私はあなたが履歴スタックに新しいレコードを追加しますrouter.pushメソッドを使用し、別のURLに移動したいときには、ユーザーがブラウザの[戻る]ボタンをクリックしますバック前のURLへ。
プロセスパラメータは、文字列またはオブジェクトパスがアドレスを記述することができます。router.replaceちょうど現在の履歴レコードを置き換える、歴史に新しいレコードを追加しません。
履歴レコードどのように多くのステップ前方または後方後方でrouter.go。
//文字列照合パス経路
router.push（{： 'ホーム'経路を }）
router.push（「ホーム」）
オブジェクトは//
//ルート/レジスタ/ 123 USERID =の名前
router.push（{「1' } 'ユーザ'、paramsは：{ID名}）
ID = 1 /レジスタにトラッキングパラメータと//？
router.push（{パス：「登録」、クエリ：{ID：」1' }}）
PS：提供されている場合、パスされるparamsは無視されている
ルートを名前：
構成にルータインスタンス、ルートを作成する場合設定の名前をルーティングします。
ルータ新しい新しいVueRouter =定数（{
ルート：[
{
パス：「/ユーザー/：はuserId」、
名称：「ユーザー」、
コンポーネント：ユーザー
}
]
}）
//のルーターリンクに選ばルーティング（1）に連結されオブジェクトプロパティを渡すと（2）オブジェクトrouter.push渡す
</ルーターリンク>ユーザー<=は"{} 123名： 'ユーザー'、paramsは：はuserId {}"ルータのリンクを>
router.push（ {名：
パス{ '/ A'、リダイレクト'/ B'}
{パス： '/ A'、リダイレクト：{名： 'FOO'}}
ナビゲーションガード：主ガードモードを介してジャンプしたり、ナビゲーションをキャンセルするために使用されます。傍受、検査する権限などログ
PS：パラメータを入力するか、またはガードを残すナビゲーションをトリガしないクエリを変更します。あなたは、オブジェクトの$経路でこれらの変化への対応やbeforeRouteUpdateを使用するように内部のコンポーネントを守ることができます。
グローバルフロントガード：
CONST =新しい新しいルータVueRouter（{...}）
router.beforeEach（（> =）次の、から、の{
次の（）
}）
PS：このフック、実行の効果を解決するために、次のメソッドを呼び出してください次の呼び出しのパラメータはメソッドによって異なります。パイプラインで行わフック。全体フックにわたって実行した場合、ナビゲーション状態が確認された
現在のナビゲーションを遮断する（偽の）次に、このような割り込みのURLを変更するなどの特定の条件下で判定され、URLからの経路に対応するアドレスにリセットされ、
次に（「/）次（{パス：「/」} ）別のアドレスにジャンプし、現在のナビゲーションは、新しいナビゲーションその後、中断され、
グローバル後部フック：
CONSTは=新しい新しいルータVueRouter（{...}）
router.afterEach（ => {（次に、からへ）
）}
排他的ガードをルーティングする：
ルート：[
{
パス： '/ foo'で、
コンポーネント：フー、
beforeEnter：（次に、からの、）=> {
// ...
}
}
]
}）
アセンブリフック内：
CONST = {Fooの
テンプレート： `.. .`、
beforeRouteEnter（次の、から、に）{
//確認に対応しているルート前アセンブリをレンダリングするために呼び出さ
//ありません！ことができます！例this`取得コンポーネント`
現在の実行コンポーネントのインスタンスが作成されていないので、フック@
}、
（次に、からの、）beforeRouteUpdate {
コンポーネントが多重化と呼ばれるルート電流の変化が、//
例//方法/ FOO /のパスに対して動的パラメータ言った：idは、ジャンプ/ FOO / 1および/ FOO / 2、との間の時間
// fooが同じ構成要素をレンダリングし、したがってコンポーネントインスタンスを多重化することができるので。そして、このフックは、この場合に呼び出されます。
//あなたは`コンポーネントのインスタンスにアクセスすることができますthis`
}、
BeforeRouteLeave（次に、からへ）{
離れ対応からアセンブリの場合//ナビゲーション経路呼び出さ
//アクセスコンポーネントインスタンスthis` `
}
}
フル解像度プロセスナビゲーション：
ナビゲーションがトリガされます。
通話中の構成要素の不活性化では、ガードを終了します。
グローバルbeforeEachガードを呼び出します。
コンポーネントの再利用でbeforeRouteUpdateガード（2.2以降）を呼び出します。
構成コールルーティングBeforeEnter。
非同期ルーティングコンポーネントを解決します。
内部のコンポーネントを起動されbeforeRouteEnterを呼び出します。
グローバルbeforeResolveガード（2.5+）を呼び出します。
ナビゲーションが確認されました。
afterEachは、グローバルフックを呼び出します。
DOMは更新をトリガ。
コールバック関数の次のパスにbeforeRouteEnterガードを呼び出すことによって、良い例を作成します。
経路メタ情報：プロパティメタ構成をルーティング、それは（異なるページレイアウトを示し、異なるメタ情報を用いて）異なる経路を達成するために異なるページを示し、キー値の数を保持することができるオブジェクトであるメタ情報メタルーティングによって
ルート設定をルートレコードに各ルートオブジェクト。経路レコードは、したがって、マッチングが成功した場合、彼は複数のルーティング・レコードをマッチングさせることができる経路入れ子にすることができ
、例えば、上記経路の構成を、/ fooの/バーは、URLの親記録及びサブ経路ルートレコードに一致するであろう。
の経路は、すべてのルートがレコード$ルートオブジェクトとして公開されるように一致して（ものナビゲーションでルートオブジェクトを守っ） $ route.matched配列。したがって、我々は、ルーティングレコードをチェックするためにメタフィールドの$ route.matchedを横断する必要があります
コンフィギュレーションをルーティングする場合、ルーティングは、各カスタムオブジェクトのメタに直接添加して、メタオブジェクトには、何かをする、状態の一部に設けてもよいです。ログイン検証適切なためにそれを使用してください。
ルート遅延ロード：
パッケージには、アプリケーションを構築する場合、JavaScriptのパッケージには、ページの読み込みに影響を与える、非常に大きくなります。我々は、アセンブリの異なるコード・ブロックへの異なる経路に対応できる場合は、経路は、対応するコンポーネントをロードする前にアクセスされたときに、ページのアクセス速度を向上させることができます。
遅延ロードおよびルーティングコンポーネントの使用二種類：
1.vueは遅延ロードコンポーネントを達成するために、非同期コンポーネントをルーティングする：=解決>（[「ロードするルーティングアドレス」、解決]）成分として：解決=>は、[（必要 」。 /page/linkParamsQuestion.vue ']解決）が
提案2.esインポートCONSTのHelloWorld =（）=>インポート（' モジュールアドレスロードする'）
VUE'ヴューからインポート'
インポート' normalize.css / normalize.css' MODERN CSSへの代替// RESETS
//導入アニメーションアニメーション
のインポート'@ /スタイル/ libに/ animate.min.css'
インポート'@ /スタイル/ libに/ layer.css'
'ミント-UI'からインポートMintUI
インポート'ミント-ui / libに/ style.cssに
インポートアプリ'./App'から
'./router'からインポートルータ
'./store'からインポートストア
「./filters/allFilters'からallFilters *としてインポート
Object.keys（allFilters）.forEach（キー=> {
ヴュー.filter（キー、allFilters [キー]）
}）
//アイコンインポート'@ /アイコン'
'fastclick'から//インポートFastClick
// FastClick.attach（document.body）。
Vue.filter（ 'changeMemberNum'、関数（ヴァル）{
戻りval.replace（/ \ S / G ''）.replace（/（{4}）/ gで、 '$ 1'）;
}）
//インポート'@ /パーミッション' //許可制御
//使用代理的方式请求URLaxios要求
'axios'から//インポートaxios
// Vue.use（VueAxios、
Vue.prototype微信$ $ = WX;
'@のchenfengyuan / VUE-QRコード'からインポートVueQrcode;
Vue.component（VueQrcode.name、VueQrcode）;
//ページの読み込みプログレスバー表示nProgress
nProgress 'nProgress'プログレスプログレスバー//からインポート
インポート'nprogress / nprogress.css' //プログレスプログレスバーのスタイル
router.beforeEach（（と、次からの）=> {
NProgress.start（）が進行をオン//
nProgress .configure（{容易： '容易' 、速度：500}）; // 配置されたプログレスバー
次に（）;
NProgress.done（）
}）
router.afterEach（（）=> {
NProgress.done（）//エンド進捗
}）
Vue.use（MintUI）
偽=にVue.config.productionTip
新しい新しいヴュー（{
EL '#app'、
ルータ、
店舗、
テンプレート：「<アプリケーション/>」、
コンポーネント：{アプリケーション}
}）
参考 & 感谢：vue-router官网 & 各路大神
https://segmentfault.com/a/1190000009651628