子コンポーネントでvue-routerを使用するにはどうすればいいですか？

Question

私はvuejsを初めて使用しており、使用時にいくつか質問があります。 私はそれで2子コンポーネントで、rootview.vueファイルは次のようになり、ルートビューを作成します。

<template> 
    <div id="rootView"> 
    <calendar-top-view></calendar-top-view> 
    <calendar-bottom-view></calendar-bottom-view> 
    </div> 
</template> 

<script> 
    import calendarTopView from './calendarTopView.vue' 
    import calendarBottomView from './calendarBottomView.vue' 
    export default { 
    components: { 
    'calendar-top-view': calendarTopView, 
    'calendar-bottom-view': calendarBottomView 
    } 
} 
</script> 

とカレンダーボトムビューコンポーネントで、私は間のスイッチを助けるためにVUE-ルーターを使用する必要があります子コンポーネントには、calendarViewとagendaViewがあります。だから私はちょうど私のカレンダーボトムVUEコンポーネントにVUE-ルータを追加することを決定し、以下のコードは、次のようになります。私はするつもり何

<template> 
    <div id='mainRightDiv'> 
    <div id='calendarToolboxDiv'> 
     <a v-link='{ path: "/calenarView"}'></a> 
     <a v-link='{ path: "/agendaView"}'></a> 
    </div> 
    <router-view></router-view> 
    </div> 
</template> 

<script type="text/javascript"> 
    import Vue from 'vue' 
    import calendarView from './calendarView.vue' 
    import agendaView from './agendaView.vue' 
    import VueRouter from 'vue-router' 
    Vue.use(VueRouter) 
    let App = Vue.extend({}) 
    let router = new VueRouter() 
    router.map({ 
    '/calendarView': { 
     component: calendarView 
    }, 
    '/agendaView': { 
     component: agendaView 
    } 
    }) 
    export default { 
    ready: function() { 
     router.go({ path: '/calendarView'}) 
    } 
    } 
</script> 

コンポーネントがあるときに最初calendarViewをレンダリングするためにルータをさせることです初期化されました。しかし、このページを実行すると、エラーメッセージが表示されます。

ルータ対応のアプリ内でのみ使用できます。

vue-routerの正式な仕様を確認したところ、デモコードのvue-routerはデモアプリケーションのjsエントリで使用されていましたが、子コンポーネントでの使用は見つかりませんでした。

私は、rootではなく、子コンポーネントのいずれかでvue-routerを使用することはできますか？

Answer 1

私は過去3ヶ月間Vue.jsで作業していましたが、使用するチュートリアルやドキュメントを一度も見たことがありませんとしましょう。私はあなたがES6を使用していないかのように書くつもりです。 Gulpと一緒に使用する（もしあれば）モジュールバンドラ（WebPack、Browserify）もVueifyを使用しようとしていると思われるので、これを言うべきです。いずれかがなければ、.vueファイルを読むことはできません。あなたは/SUB1を入力したときに、私は基本的にルート親.js file.SoにVUE-ルータを使用

var Vue = require('vue'); 
var Router = require('vue-router'); 
Vue.use(Router); 
Vue.config.debug = true; 
//any other npm packages 

import Alert from './components/Alert.vue'; 
import SubVue1 from './pages/Subvue1.vue'; 
import SubVue2 from './pages/Subvue2.vue'; 
import Bar from './pages/Bar.vue'; 
import Baz from './pages/Baz.vue'; 

var App = Vue.extend({ 
    data: function() { 
     return { 
      //any ViewModel data 
     } 
    }, 
    components: {Alert} 
}); 

var router = new Router(); 
router.map({ 
    // Not found handler 
    '*': { 
     component: { 
      template: '<div class="text-align:center">' + 
      '<h1>Not Found</h1>' + 
      '</div>' 
     } 
    }, 
    '/sub1': { 
     name: 'subvue1', 
     component: SubVue1 
    }, 
    '/sub2': { 
     name: 'subvue2', 
     component: SubVue2 
     // add a subRoutes map under /foo 
     subRoutes: { 
      '/bar': { 
       // Bar will be rendered inside Foo's <router-view> 
       // when /foo/bar is matched 
       component: Bar 
      }, 
      '/baz': { 
       // Same for Baz, but only when /foo/baz is matched 
       component: Baz 
      } 
     } 
    } 
}); 

router.start(App, 'body'); // #app,.start -as you wish 

注：あなたが構造を持っている必要があり.jsファイルを、作成し、あなたがVueifyでBrowserifyを使用すると仮定すると、

、Subvue1.vueがロードされます。ただし、.vueすべてのファイルをGulpを通じて1つの.jsファイルにバンドルする必要があります。 サブルート（calendarViewとagendaViewスイッチ）に注意してください。すべてのSubVue、バー、バズは構造を持っている必要があります。

<template> 
    <router-view><router-view> //For Subvue2 subroute 
</template> 
<script> 
    export default { 
     props: ['parentProperty'], 
     data: function() {// data} 
     methods:{} 
    } 
<style></style> 

私はヴュー、ヴュー・ルーターなどをダウンロードするためにNPMを使用しますが、あなたのプロジェクトのリソースからインポートすることもできます。私はスマートになるつもりはない、私はあなたのコードからの仮定に基づいて支援しようとしています。詳細についてはVue Routerドキュメントをお読みください。