ルーティングの設定 - ページを選択しVue2.5観光プロジェクト10の都市

ブランチの作成：都市ルータ

そして、ローカルブランチの切り替えを引っ張っ：

gitのプル
gitのチェックアウトの都市ルータ

[ルーティングindex.jsを設定します。

「VUE」からインポートVueの
輸入ルータから「VUE-ルータの
からインポートホーム「@ /ページ/ホーム/ホーム」
からインポート市「@ /ページ/都市/都市」

Vue.use（ルータ）

のエクスポートデフォルト 新しいルータ（{ 
  ルート：[ 
    { 
      パス： '/' 、
      名称： 'ホーム' 、
      成分：ホーム
    }、
    { 
      パス： '/都市' 、
      名称： '市' 、
      成分：シティ
    } 
  ] 
}）

ページの新しい都市のフォルダ、ファイルCity.vueを作成

私たちは、Header.vueホームの下のコードを変更し、「北京」のホーム・ページをクリックの先頭に、City.vueページをジャンプすることを願っています：

< ルータリンクへ= "/都市" > 
    < DIV クラス= "ヘッダ右" > {{this.city}} < I クラス= "iconfont矢印アイコン" >＆＃1 xe64a。</ I > </ DIV > 
</ ルータ・リンク> 

< スタイルLANG = "スタイラス" スコープ> 
.header右
  色：#FFF 
</ スタイル>

そして、City.vueページの編集を続行します。

< テンプレート> 
< divの> 
  < 都市ヘッダ> </ 都市ヘッダ> 
</ DIV > 
</ テンプレート> 

< スクリプト> 
からの輸入CityHeader ' ./components/Header ' 
輸出のデフォルト{ 
  名：' 市' 、
  コンポーネント：{ 
    CityHeader 
  } 
} 
</ スクリプト>

市では、フォルダ、新しいコンポーネントのフォルダは、Header.vueファイルを作成します。

< テンプレート> 
< DIV クラス= "ヘッダ" > 
  < ルータリンクへ= "/" > 
    < DIV クラス= "ヘッダー左" > < DIV クラス= "iconfontバックアイコン" >＆＃xe624。</ DIV > </ DIV > 
  </ ルータ・リンク> 
  城市选择
</ DIV > 
</ テンプレート> 

< スクリプト> 
輸出デフォルト{ 
  名："
</ スクリプト> 

< スタイルLANG = "スタイラス" スコープ> 
@import '〜スタイル/ varibles.styl' 
.header 
  位置：相対
  オーバーフロー：隠された
  高さ$ headerHeightの
  行の高さ$ headerHeightの
  テキスト整列：センターの
  色：#FFF 
  font-サイズ：.32rem 
  背景：$はbgColor 
  .backアイコンの
    位置：絶対
    トップ：0 
    左：0 
    幅：.64rem 
    テキスト整列：センター
    のfont-size：.4rem 
    色：#FFF 
</ スタイル>

レンダリング：

アップロードコード：

gitのアドオン。
-m "ciyt-ルータ"コミットgitの
gitのプッシュ

マージコード：

gitのチェックアウトマスター
gitのマージ都市ルータの
Gitのプッシュ

ルーティングの設定 - ページを選択しVue2.5観光プロジェクト10の都市

おすすめ