ダイナミックルーティング受信パラメータ

我々はスタティックルーティングの使用について話最後の章、今回は伝統的な価値観の話とダイナミックルーティングの値を取得しています。
まず、次のように入力し、content.vueコンポーネントを作成します。

<テンプレート> 
  <DIV ID = " コンテンツ" > {{MSG}} </ div> 
</テンプレート> 
<スクリプト> 
エクスポートデフォルト{ 
  データ（）{ 
    リターン{ 
      MSG：" 数据" 
    }。
  }、（）{搭載
     はconsole.log（本。。$経路のparamsを）
  } 
}。
</ SCRIPT>

第二に、あなたはまた、最後の章では、我々はそれに登録JS登録ルート、について話したことを覚えておく必要がありますか？あなたは、私の記録の最後の章で簡単に見て覚えていない場合。
交換用コードtitle2.vueの：

<テンプレート> 
    の<div> 
        <BR> 
        あなたの未来はあなたに感謝します、今必死に
         <BR> 
        <UL> 
            <LI V- 用 = " リストの（項目、キー）" > 
               <-Linkルータ：=に" 「/コンテンツ/ '+キー" > {{項目}} </ルータリンク> 
                </ LI> 
        </ UL> 
    </ div> 
</テンプレート> 
<スクリプト> 
エクスポートデフォルト{ 
    データ（）{ 
        リターン{ 
            MSG：' zizujian " 、
            リスト：[ " AA "、" CCCC "、" BBB " ] 
        } 
    } 
}
 </ SCRIPT> 
 *：=に" '/コンテンツ/' +キー"動的に値によって渡されます。

公開APIは、リソースを介して取得する前に、サイトの総合的な外観は、インタフェースはクロスドメインの呼び出しを可能にすることを条件とします。
最初の入力は、NPM -save VUEリソースモジュールをインストールするインストール、vscode端末を開きました。
index.jsのファイルルータを変更

パス：' /コンテンツ/：援助'、

にコードを書き直しtitle2.vue：

<テンプレート> 
  の<div> 
    <br /> 将来的你会感谢现在拼命的
    你<br /> 
    <UL> 
      <LIのV- 用 = " リストの中（項目、キー）" > 
        <ルータリンク：=に" 「/content/'+item.aid " > {{item.title}} </ルータ・リンク> 
      </ LI> 
    </ UL> 
  </ div> 
</テンプレート> 
<スクリプト> 
輸出デフォルト{ 
  データ（）{ 
    リターン{ 
      MSG：" zizujian " 、
      リスト：[] 
    }。
  }、
  メソッド：{ 
    requestData（）{
      VaRの API =
         " http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1 " 。
      この。$ HTTP。取得（API）.then（応答=> {
         // はconsole.log（Response.body.result）; 
        この .LIST = Response.body.result; 
      }）; 
    } 
  }、 
  （）{ 搭載
    この.requestData（）。
  } 
}。
</ SCRIPT>

第二に、content.vueを作成

<テンプレート> 
  <DIV ID = " コンテンツ" > 
    {{MSG}}
     <HR /> 
    <UL> 
      <LIのV- ため = " リスト内の項目" > 
        {{item.title}}
         <PのV-HTML = " アイテム.content " > </ P> 
      </ LI> 
    </ UL> 
  </ div> 
</テンプレート> 
<スクリプト> 
インポート{METHODS} から " HTTP 」。
輸出のデフォルト{ 
  データ（）{ 
    リターン{ 
      MSG：
      リスト：[] 
    }。
  }、
  メソッド：{ 
    のgetData（AID）{ 
      VARの API =
         " http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid= " + 援助;
      この。$ HTTP。取得（API）.then（応答=> {
         この .LIST = response.body.result; 
      }）、
        ERR => {}; 
    } 
  }、 
  （）{ 搭載
    この .getData（本。。$ルートparamsは.aid）。
  } 
}。
</ SCRIPT>

最後にhtm5 + CSS3を学び始めるようにVUEの完了として、当然のことながら、私は得意、CSSでない対処していなかった、最後にそれの効果を確認するために、すべての入力NPM実行のdevの実行を保存します

ダイナミックルーティング受信パラメータ

おすすめ