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" > </ スクリプト> 
  < スタイル> 
    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 >

 

おすすめ

転載: www.cnblogs.com/fdxjava/p/11617699.html