Vueのネストされたルート

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > <
  SRC = "./ libに/ VUE-ルータ-3.0.1.js" > </ スクリプト> 
</ ヘッド> 

< 身体> 
  < div要素のid = "アプリ" > 
    < ルータリンクへ= "/アカウント" >アカウント< / ルータ・リンク> 
    < ルータビュー> </ ルータビュー> 
  </ divの> 

  < テンプレートID = "TMPL" > 
    < divの> 
      < H1 >这是アカウント组件</ H1 > 
      < ルータリンク=「/アカウント/ログイン」>ログイン</ ルータリンク> 
      < ルータリンクへ=「/アカウント/登録」>登録</ ルータリンク> 
      < ルータ-ビュー> </ ルータービュー> 
    </ divの> 
  </ テンプレート> 

  < スクリプト> 

    // テンプレートオブジェクトコンポーネント
    のvar アカウント= { 
      テンプレート：' #tmpl ' 
    } 

    VARのログイン= { 
      テンプレート："<H3>これは、ログ内のサブ経路である</ H3> ' 
    } 

    VAR レジスタ= { 
      テンプレート：' <H3>この登録</ H3>サブ経路である' 
    } 

    VARのルーターは=  新しい新しいVueRouter（{ 
      [ルート
        { 
          パス：「アカウント/ 」、コンポーネント：アカウント、
           // サブルーティングパスの前には、/取らないようにしながら、子どもたちを使用するには、サブルーティングを達成するための属性
          // そうでない場合は、お客様が理解するためにとても不便、ルートパス要求に始めることはありませんURLアドレス
          子供：[ 
            {パス：' ログイン' 、コンポーネント：ログイン}、
            {パス：'登録' 、成分：}登録
          ] 
        } 
        // {パス： '/アカウント/ログイン'、コンポーネント：ログイン} 
        // {パス： '/アカウント/'レジスタ、成分：登録} 
      ] 
    }）

    // 创建ヴュー实例、得到ビューモデル
    VAR VM =  新しいヴュー（{ 
      EL：' #app ' 、
      データ：{}、
      メソッド：{}、
      ルータ
    }）。
  </ スクリプト> 
</ ボディ> 

</ HTML >