ネストされたVue--ルーティング - =「/アカウント/ログイン」-toマルチレベルの関係---ルーティングサブアセンブリの子供：[]、 - 親コンポーネントの内容を保存します

<！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 >