vue-router学習(2)

12770 ワード

一、vue-router構成サブルーティング
実際の生活における応用インタフェースは実際にはより複雑であり,通常は多層ネストされたコンポーネントから組み合わせられている.例えば;H 1ページとH 2ページはホームページにネストする.まずラベルで2つの新しいナビゲーションリンクを追加しました

<router-link :to="{name:'HelloWorld'}">  </router-link>
<router-link :to="{name:'H1'}">H1  </router-link>
<router-link :to="{name:'H2'}">H2  </router-link>

2.ハローワールドでvueラベルを追加し、サブテンプレートに挿入位置を指定します.

 <template>
  <div class="hello">
    <h1>{
     {
      msg }}</h1>
    <router-view></router-view>
  </div>
</template>

3.componentsディレクトリの下に2つのコンポーネントテンプレートH 1を新規作成する.vueとH 2.vueは両者の内容が類似する、以下H 1である.vueページの内容:

<template>
  <div class="hello">
    <h1>{
     {
      msg }}</h1>
  </div>
</template>
<script>
  export default {
     
    data() {
     
      return {
     
        msg: 'I am H1 page,Welcome to H1'
      }
    }
  }
</script>

4.router/indexを修正する.jsコード,サブルーティングの書き方は,既存のルーティング構成の下でchildrenフィールドを加える.

 routes: [
    {
     
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [{
     path: '/h1', name: 'H1', component: H1},//       HelloWorld.vue   
        {
     path: '/h2', name: 'H2', component: H2}
      ]
    }
  ]

二、単一ページマルチルーティングエリア操作
1ページに2つ以上の領域があり、ルーティングjsファイルを構成することで、これらの領域の内容を操作します.
1.App.vueファイル、下に新しい2行のラベルを書いて、そしていくつかCSSスタイルを加えました

<template>
  <div id="app">
    <img src="./assets/logo.png">
       <router-link :to="{name:'HelloWorld'}"><h1>H1</h1></router-link>
       <router-link :to="{name:'H1'}"><h1>H2</h1></router-link>
    <router-view></router-view>
    <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"/>
    <router-view name="right" style="float:right;width:50%;background-color:yellowgreen;height:300px;"/>
  </div>
</template>

2.ルーティングでこの3つの領域を構成する必要があり、構成は主にcomponentsフィールドで行う.

export default new Router({
     
    routes: [
      {
     
        path: '/',
        name: 'HelloWorld',
        components: {
     default: HelloWorld,
          left:H1,//  H1    'I am H1 page,Welcome to H1'
          right:H2//  H2    'I am H2 page,Welcome to H2'
        }
      },
      {
     
        path: '/h1',
        name: 'H1',
        components: {
     default: HelloWorld,
          left:H2,//  H2    
          right:H1//  H1    
        }
      }
    ]
  })

上のコードは2つのパスを書きました.1つはデフォルトの'/'、もう1つは'/Hi'.2つのパスの下のcomponentsでは、3つの領域に表示内容を定義します.

vueコンポーネント間の値伝達方式の詳細

[C++Primer]練習1.4