web-dev-qa-db-ja.com

Vue.jsでは、1つが別のコンポーネント内にある複数のルータービューを使用する方法は？

<router-view/>を使用して異なるページをレンダリングするメインnavbarがあるVue.jsシングルページアプリケーションがあります。

このようなもの：

<main-header/> <!-- navigation links -->
<transition name="slide-fade" mode="out-in">
  <router-view/> <!-- different pages -->
</transition>

それらのページの1つには、メインナビゲーションバーと同様に<router-link/>を使用しているナビゲーションリンクのあるサイドバーがあります。

このようなもの：

<sidebar/> <!-- navigation links -->
<div class="content">
  <transition name="slide-fade" mode="out-in">
    <router-view/> <!-- content beside the sidebar -->
  </transition>
</div>

サイドバーのナビゲーションリンクをクリックすると、サイドバーの横にあるコンテンツを変更し、URLも変更する必要があります。ただし、サイドバーを失い、コンテンツセクションでレンダリングされるコンポーネントを取得するだけです。

望ましい結果を得るにはどうすればよいですか？上記の例のように、1つが別のコンポーネント内にある複数の<router-view/>sを使用するにはどうすればよいですか？

javascriptvue.jsvuejs2vue-router
7
wrahim

サイドバーが消えた理由は、すべてのコンポーネントが最初の<router-view><main-header>。

次のように、サイドバールーターでchildrenを構成して、ネストされたルーターを使用する必要があります。

const router = new VueRouter({
  routes: [
    { path: '/your-sidebar-url', component: your-sidebar-page,
      children: [
        {
          // A will be rendered in the second <router-view>
          // when /your-sidebar-url/a is matched
          path: 'a',
          component: A
        },
        {
          // B will be rendered in the second <router-view>
          // when /your-sidebar-url/b is matched
          path: 'b',
          component: B
        }
      ]
    }
  ]
})

詳細は ネストされたルート

8
adoug

named viewsを使用する必要があります。ビューにname属性を提供します。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>

そしてそれらを次のように設定します

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar
      }
    }
  ]
})

公式ドキュメント を参照してください。

11
Tuan Pham

@adougの回答が役に立ちました。

しかし、私の場合は、両方のルータービューに名前を付けていました。

私はそれを修正するためにこれをしました：

<router-view name='a'/>
<router-view name='b'/>

You have <router-view name='a'/>, somewhere inside you 
'FatherComponent.vue' mounted in 'a' you have a 
second <router-view name='b'/>

私はこれを修正しました：

const router = new VueRouter({
    routes: [
        { path: '/your-sidebar-url',
            components: {
                a: FatherComponent //you sidebar main component in 'a' name of routed-view
            },
            children: [
                {
                    // A will be rendered in the second <router-view>
                    // when /your-sidebar-url/a is matched
                    path: '/child-path/a',
                    components: {
                        b: ChildComponentA //note that 'b' is the name of child router view
                    }
                },
                {
                    // B will be rendered in the second <router-view>
                    // when /your-sidebar-url/b is matched
                    path: '/child-path/b',
                    components: {
                        b: ChildComponentB //note that 'b' is the name of child router view
                    }
                }
            ]
        }
    ]
})
1
Jose Seie