vue-routerでcomponent-nestingを使用するにはどうすればいいですか？

私はVueの新機能があり、vue-routerと共にネストされたコンポーネントを使用する方法を見つけることができません。vue-routerでcomponent-nestingを使用するにはどうすればいいですか？

index.htmlを

<body> 
    <div id="app"> 
     <router-view></router-view> 
    </div>

app.js

const router = new VueRouter({ 
    routes: [{ path: '/login', component: Login }] 
}) 

const app = new Vue({ 
    router, 
}).$mount('#app')

コンポーネント/ログイン：私は（いくつかの-重要でないコードは省略）これまで持って何

.vue

<template> 
    <h1>Please log in</h1> 
</template>

これは完全にうまくいきます - 私は/loginに移動し、メッセージはh1タグに表示されます。 RegisterまたはResetPasswordのようなコンポーネントを作成してルータに追加すると、それでも正常に動作します。しかし問題は、これらのコンポーネントにいくつかの繰り返しコードがあることです（たとえば、すべての認証関連ページを青色の背景にしたい場合）どうにかして "親"コンポーネントを作成したいと思っています。すべての「子」コンポーネントで同じです。何かのように：

const router = new VueRouter({ 
    routes: [ 
     { path: '/', component: Auth, children: [ 
      { path: '/login', component: Login } 
      { path: '/register', component: Register } 
     ]} 
    ] 
})

しかし、この構成では、完全に間違っているメインルートpath: '/'、そこにある - 私はしないでください。

Auth component (makes the page-background blue) 
    -> Login component (shows the login form) 
    -> Register component (shows the registration form)

私はルートの「子」を介してこれを行うことができます知っていますここに欲しいです - 私はAuthコンポーネントを "スタンドアロン"で使用したくありません - 入れ子コンポーネントの "ラッパー"と同じようにしたいと思います。

この問題を解決する最善の方法は何ですか？

出典

2017-09-15 Martin Heralecký

この問題を解決する方法は、ベースパスのリダイレクトを使用することです。

{ path: '', redirect: '/to/path' },

あなたのケースで、それは

const router = new VueRouter({ 
    routes: [ 
     { 
      path: '/', 
      component: Auth, 
      children: [ 
       { path: '', redirect: '/login' }, 
       { path: '/login', component: Login }, 
       { path: '/register', component: Register } 
      ] 
     } 
    ] 
})

だろうこれは私が巣にレジスタコンポーネントの子として別のビューをしたい場合はどう

出典

2017-09-15 15:23:46

ことを保証しますか！同じアプローチで、私にとっては白い画面を表示します –

vue-routerでcomponent-nestingを使用するにはどうすればいいですか？

答えて

関連する問題