<!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" > </ スクリプト> < スタイル> HTML、 身体{ マージン:0 ; パディング:0 ; } .header { 背景色:オレンジ。 高さ:80px ; } H1 { マージン:0 。 パディング:0 ; フォントサイズ:16pxに; } .container { ディスプレイ:フレックス。 高さ:600PX 。 } .LEFT { 背景色:ライトグリーン。 フレックス:2 ; } .main { 背景色:lightpink 。 フレックス:8 ; } </ スタイル> </ ヘッド> < ボディ> < DIV ID = "アプリケーション" > <ルータ・ビュー> </ ルータビュー> < divのクラス= "コンテナ" > < ルータ-ビュー名= "左" > </ ルータビュー> < ルータビュー名= "メイン" > </ ルータビュー> </ DIV > </ DIV > < スクリプト> VARのヘッダ= { テンプレート:' <H1 CLASS = "ヘッダ">ヘッダ头部区域</ H1> ' } たleftBox = { テンプレート。' <H1クラスの= "左">左側のサイドバー領域<の/ H1> ' } VAR mainBox = { テンプレート:' <クラスのH1は= "メイン"> mainBoxボディ領域<の/ H1> ' } // ルートオブジェクト作成 VARをルータ= 新しい新しいVueRouter({ ルート: / * {パス: '/'、コンポーネント:ヘッダ}、 {パス: '/左'、コンポーネント:leftbox}、 {パス: '/メイン'、コンポーネント:mainBox} / * { パス:' / ' 、コンポーネント:{ 'デフォルト" :ヘッダ、 ' 左' :leftbox、 ' メイン' :mainBox } } ] }) //はVueのインスタンスを作成し、ビューモデルを与えるために VAR VM = 新しい新しいヴューに({ EL:' #app ' 、 データ:{}、 メソッド:{}、 ルータ } ); </ スクリプト> </ ボディ> </ HTML >