<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を使用するにはどうすればよいですか?
サイドバーが消えた理由は、すべてのコンポーネントが最初の<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
}
]
}
]
})
詳細は ネストされたルート
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
}
}
]
})
公式ドキュメント を参照してください。
@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
}
}
]
}
]
})