18.ルーティングネスティング

1.新しいディレクトリコンポーネントのユーザーディレクトリ、および2つの新しいコンポーネントAddUser.vueディレクトリUserList.vue

AddUser.vue

< テンプレート> 
    < divの> 
        < H2 > {{MSG}} </ H2 > 
    </ DIV > 
</ テンプレート> 
< スクリプト> 

輸出デフォルト{ 
  名：' ホーム' 、   
  データ（）{ 
    リターン{ 
        MSG：' 增加用户' 
    } 
  }、
  メソッド：{    
      
  }、
  コンポーネント：{ 
  } 
} 
</ スクリプト> 
< スタイルのlang= "SCSSは、" スコープ> 

</ スタイル>

UserList.vue

< テンプレート> 
    < divの> 
        < H2 > {{MSG}} </ H2 > 
    </ DIV > 
</ テンプレート> 
< スクリプト> 

輸出デフォルト{ 
  名：' ホーム' 、   
  データ（）{ 
    リターン{ 
        MSG：' 用户列表' 
    } 
  }、
  メソッド：{    
  }、
  コンポーネント：{ 
  } 
} 
</ スクリプト> 
< スタイルのlang= "SCSSは、" スコープ> 

</ スタイル>

2. main.js導入アセンブリ、およびネストされた経路

main.js

「VUE」からインポートヴュ。
以下からの輸入のApp './App.vue' ; 

以下からの輸入VueResource 'VUE-リソース' ; 
Vue.use（VueResource）


からの輸入VueRouter「VUE-ルータの。
Vue.use（VueRouter）

// 1.创建组件、导入组件 
'./components/Home.vue'からインポートホーム。
以下からの輸入ニュース「./components/News.vue」; 
以下からの輸入vContent './components/vContent.vue' ; 
グッドインポート「./components/Goods.vue」; 

以下からのインポートユーザー「./components/User.vue」; 
からの輸入は、AddUser」。; 
のUserListからインポート './components/User/UserList.vue' ; 

// 2.設定ルーティング 
CONSTルート= [ 
  　　{パス： '/ホーム' 、コンポーネント：ホーム}、
  　　{パス： '/ニュース' 、コンポーネント：ニュース}、
      {パス： '/ vcontent /：AID'、コンポーネント：vContent} // 動的ルーティング 
      {パス： '*'、リダイレクト'/ホーム'}、// デフォルトルートジャンプ 
      {パス：「/商品、コンポーネント：グッド}、

      { 
        パス： '/ユーザー' 、
        コンポーネント：ユーザ、
        子供：[ 
          {パス： 'のadduser' 、成分：は、AddUser}
          {道：'のUserList' 、コンポーネント：のUserList} 
        ] 
      } 
     
] 
// これがルートであることに注意してくださいではなく、ルータ

// VueRouter用の3例 
CONST =ルータ新しい新しいVueRouter（{ 
      ：MODE '歴史'、// 履歴モードにハッシュ 
  　　ルート// （略称）ルータを対応する：ルータ
}）

// 4.マウント
新しい新しい（{ヴュー
  ：EL '#app' 、
  ルーター、
  レンダリング：H => H（APP）
}）

// 5. <ルータApp.vue内側に配置-view> </ルータビュー>

User.vue 3.導入<ルータビュー> </ルータビュー>

user.vue

< テンプレート> 
    < divの> 
        < divのクラス= "ユーザー" > 
            < divのクラス= "左" > 
                < UL > 
                    < 李> < ルータリンクへ"/ユーザー/ adduserコマンド" = >增加用户</ ルータリンク> < / 李> 
                    < 李> < ルータ・リンクに"/ユーザ/ユーザリスト" = >用户列表</ ルータ・リンク> </ 李> 
                </ UL > 
            </ DIV >
            < divのクラス= "右" > 内容区域
                 < ルータビュー> </ ルータビュー> 
            </ DIV > 
        </ DIV > 
    </ DIV > 
</ テンプレート> 
< スクリプト> 

輸出デフォルト{ 
  名：' ホーム' 、   
  データ（）{ 
    リターン{ 
        MSG：' 用户中心' 
    } 
  }、
  メソッド：{    
  }、
  成分：{ 
  } 
}
</ スクリプト> 
< スタイルLANG = "SCSS" スコープ> 
.user { 
    表示：フレックス; 
    .LEFT { 
        幅：200pxの。
        分の高さ：400ピクセル; 
        ボーダー右：1pxの固体#eee 。
    } 
    .RIGHT { 
        フレックス：1 。
    } 
} 
</ スタイル>