vue-router 2、ajax経由でルートを取得する方法は？

Question

経路配列をajax経由でフェッチした後、動的に作成するにはどうすればよいですか？

ルータを初期化した後にルータに新しいルートを追加/プッシュする方法はありますか？

これは動作しません：

new Vue({ 
    el: '#app', 
    template: '<App/>', 
    data: { 
    content: [] 
    }, 
    created: function() { 
    this.$http.get('dummyjsondatafornow').then((response) => { 

     // this doesn't work when creating the VueRouter() outside the Vue instance, as in the docs. 
     // this.$router.options.routes.push({ path: '/about', component: About }) 

     let routes = [ 
     { path: '/about', component: About } 
     ] 

     // this doesn't work either 
     this.router = new VueRouter({ 
     routes: routes 
     }) 
    }) 
    }, 
    // router: router, 
    components: { App } 
}) 

Answer 1

私は何があると信じていません。

これは、経路をワイルドカードできるので、代替手段を提供する可能性があると述べています。

私はバックエンド（およびページが作成されたページ）がすべてのページをJSONとしてVueに配信したCMSを介して制御されたサイトを構築しました。これは、Vueがバックエンドが作成していたルートを認識していないことを意味しました。

代わりに、すべてのCMSページを単一の*ワイルドカードコンポーネント経由でVue Routerに渡しました。

const routes = [ 
    { path: '*', component: AllPages } 
] 

Vueのルータ2がAdvanced Matching Patterns

することができます。これらはあなたがAJAX経由して戻って渡されたオブジェクトを挿入することはできませんのでながら、あなたは、多種多様な状態を設定することができます：Vueのルータ2には、これは次のようになりますルータにワイルドカードと一致するAllPagesコンポーネントに動的コンポーネントを追加することができます。これにより、ajaxリクエストを介してロードするコンポーネントの名前を渡し、ページが呼び出されたときにそのコンポーネントをロードすることができます。すなわち

あなたのAjaxのレスポンス：全ページのVUEコンポーネントで次に

{ 
    // url: component name 
    '/about/': 'about', 
    '/about/contact/': 'contact', 
    ... 
} 

：上記

<template> 
    <component v-bind:is="currentView"></component> 
</template> 

<script> 

    module.exports = { 
    data() { 
     return { 
     currentView: '', 
     ajaxRoutes: {}, // loaded via ajax GET request 
     ... 
     } 
    }, 
    // watch $route to detect page requests 
    watch: { 
     '$route' (to, from) { 
     if (this.ajaxRoutes[to]) { 
      this.currentView = this.ajaxRoutes[to] 
     } 
     } 
    }, 
    ... 
    } 

</script> 

かなり簡略アイデアはあるけど、基本的に、あなたは動的パスユーザーに基づいてコンポーネントをロード要求された。

Answer 2

これはバージョン2.3.0で修正されたと思います。これで、動的に経路を追加するために

router.addRoutes(routes); 

を実行することができます。

https://github.com/vuejs/vue-router/commit/0e0fac91ab9809254174d95c14592e8dc2e84d33