<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スクリプトSRC = "./ libに/ VUE-2.4.0.js"> </ SCRIPT>
<！ - パッケージ1.インポート - >
<スクリプトSRC = "./ libに/ VUE-ルータ-3.0.1.js"> </ SCRIPT>
</ head>の
<身体>
<DIV ID = "アプリ">
登录</ルータ・リンク> <=「/ログイン」へのルータのリンク>
注册</ルータ・リンク> <=「/登録」へのルータのリンク>
<！ - コンテナ - >
<ルータビュー> </ルータビュー>
</ div>
<スクリプト>
// 2.サブアセンブリを作成します。
ログインしました= {
テンプレート：「<H3>これは、ログインサブコンポーネントで、このコンポーネントはPaの開発を急いでいます。</ H3> '
}
たディレクトリ= {
テンプレート：「<H3>このサブアセンブリが登録されているが、このコンポーネントは、ベンPaの波によって開発されました。</ H3> '
}
// 3.ルートオブジェクトを作成します。
VAR =新しいルータVueRouter（{
ルート：ルーティングルールの[//配列
{パス： '/'、リダイレクト '/ログイン'}、
{パス： '/ログイン'、コンポーネント：ログイン}
{パス： '/登録'、成分：登録}
]、
linkActiveClass：「myactive」//活性化と関連するクラス
}）
// Vueのインスタンスを作成し、ViewModelにを取得します
{（VM =新しいVueのでした
「#app」
データ：{}、
方法：{}、
//ルータ：ルータ
ルータ、
見る： {
//この。$ route.path
'$のroute.path'：関数（newValに、OLDVAL）{
//にconsole.log（newValに+ '---' + OLDVAL）
IF（newValに=== '/ログイン'）{
console.log（「ログインページへようこそ」）
}そうであれば（newValに=== '/レジスタ'）{
console.log（「登録ページへようこそ」）
}
}
}
}）;
</ SCRIPT>
</ BODY>
</ HTML>