vue-router親ビューをsubRouteに置き換えます。

Question

私はvue-routerを使用しており、subRoutesに関する質問があります。ルートを設定してメインルートがリストになり、サブルートが編集/追加/ etcのようなものになるようにしたいと思います。

親ルートの<router-view>を置き換えるsubRouteコンポーネントが必要です。ドキュメントと私がテストしたことを理解する方法では、subRouteをレンダリングするために親コンポーネントのテンプレートに別の<router-view>を定義する必要がありますが、ユーザーリストは表示されたままです。

例路線：

'/users': { 
    name: 'user-list', 
    component(resolve) { 
     require(['./components/users.vue'], resolve) 
    }, 
    subRoutes: { 
     '/add': { 
      name: 'add-user', 
      component(resolve) { 
       require(['./components/users_add.vue'], resolve) 
      } 
     } 
    } 
} 

メインルータビュー：

<!-- main router view --> 
<div id="app"> 
    <router-view></router-view> 
</div> 

ユーザーリスト：

<template> 
    <a v-link="{ name: 'add-user' }">Add</a> 
    <ul> 
     <li>{{ name }}</li> 
    </ul> 
</template> 

追加ユーザー：

<template> 
    <div> 
     <a v-link="{ name: 'user-list' }">back</a> 
     <input type="text" v-model="name"> 
    </div> 
</template> 

「追加」をクリックすると、追加ユーザテンプレートで満たされたいと思っています。これは可能ですか？

また、ユーザーリストとユーザー追加コンポーネントの間に親子関係を確立することはできますか？私は、ユーザーのリストを追加コンポーネントに渡し、イベントをユーザーリストに戻すことができるようにしたいと思います。

ありがとうございます！

Answer 1

私はこれをかなり使いましたが、最終的にどのように達成できるかを考えました。このトリックは、リストをサブラインにすることです。ルートレベルのルートには、すべての子コンポーネントをレンダリングするためのコンテナとして<router-view>コンテナを用意するだけです。次に、 "list loading"を親コンポーネントに移動し、そのリストをリストコンポーネントに渡して小道具として渡します。その後、イベントを介してリストをリロードするように親に指示できます。

これは今のところ、魅力のように機能します。欠点は、私が本当に必要としなかった別のコンポーネントがあることだけです。私は時間を見つけたときの例をフォローアップします。

Answer 2

これらの編集/追加ルートはsubRoutesであってはいけません。そのように単純です。

パスがネストしているように見えるからといって、実際にネストする必要はありません。

'/users': { 
    name: 'user-list', 
    component(resolve) { 
     require(['./components/users.vue'], resolve) 
    } 
}, 
'users/add': { 
    name: 'add-user', 
    component(resolve) { 
     require(['./components/users_add.vue'], resolve) 
    } 
}