Vueルータの宛先コンポーネントを動的に設定するには

Question

vue-routerルートのターゲットコンポーネントを動的に設定しようとしています。

なぜなら、対象の正しいコンポーネントを知るためにサーバーからデータを取得する必要があるからです。 「へ」にはコンポーネントプロパティがありません - コメントは、私が「コンポーネント」に設定する方法を、言うように、

router.beforeEach((to, from, next) => { 
    get_data_from_server(to.fullPath).then(() => { 
    // set the "to" component, but how? 
    next(); 
}) 

しかし：私は考えた

一つの解決策は次のようにグローバルなガードを追加しましたオブジェクト。 （components.default.renderにあるように見えますが、それは文書化されておらず、混乱しているようにも見えません）。

もう1つの方法は上記のロジックを使用することですが、リダイレクトしましたが、正しいコンポーネントをターゲットとした動的/新規ルートを作成する方法がないことがわかりました。

ビルド時に知られていない目的地までのルートを作成するにはどうすればよいですか？

Answer 1

この解決策はうまくいくようです。

router.beforeEach((to, from, next) => { 
    get_data_from_server(to.fullPath).then(component => { 
    if (to.matched.length === 0) { 
     // the target route doesn't exist yet 
     router.addRoutes({path: to.path, component: component}) 
     next(to.fullPath) 
     return 
    } else { 
     // the route and component are known and data is available 
     next() 
    } 
}) 

キーは、上記の私のコメント内のリンクは、VUE-ルータはそれがaddRoutes()を実装してコミット示して見つけました。

注意すべき点の1つは、新しいルートが最後に追加される（意味がある）ので、存在するワイルドカードが意図しない一致を作成する可能性があることです。私はデフォルトのページにリダイレクトされたキャッチオールルートを用意していました。しかし、これは新しく追加された試合の前にマッチしました。スタックオーバーフローが発生しました。実際にはif (to.matched.length === 0)の後のコードがデフォルトルートです。