web-dev-qa-db-ja.com

Vuejsに子ルートを動的に追加する

this の公式例によると、vuejsにネストされた/子ルートを追加する機能があります。しかし、これらの子ルートを動的に追加する方法に関するヘルプ/ドキュメントが見つかりません。たとえば、親ルートにアクセスしたときにのみ子ルートを追加します。

現在、Vueアプリケーションのすべてのルートは、ルーターインスタンスを作成する単一の場所で定義されています。 addRoutes というAPIがありますが、方法がわかりません。それを使用して、アプリケーションの遅延ロードされた機能をルートに沿って追加します。Angular2+モジュールシステムに精通している場合は、そのモジュール内の機能モジュールのルートを定義し、それらを遅延ロードすることもできます。何かができるかどうか疑問に思います。 VueJsで達成されましたか？

vue.jslazy-loadingvue-routerdynamic-routing
7
Nexus23

$router.addRoutesを使用して、子を指定してルートを再追加できます。

現在の$routeに一致するルート定義オブジェクトを$router.options.routes配列で検索して、（$route.pathオブジェクトではなく）現在のルート定義を取得する必要があります。次に、ルート定義のchildren配列をオブジェクトに追加し、それを$router.addRoutesに渡します。

created() {
  let { routes } = this.$router.options;
  let routeData = routes.find(r => r.path === this.$route.path);
  routeData.children = [
    { path: 'bar', component: Bar },
    { path: 'baz', component: Baz },      
  ];
  this.$router.addRoutes([routeData])
}

これは、ルートのコンポーネント定義のcreakedフックに子ルートを動的に追加するフィドルの例です。

7
thanksd