VueJSコンポーネントが表示され、コンポーネントにアイテムが渡されます

Question

VueJS 2.0とvue-router 2を使用しており、ルートパラメータに基づいてテンプレートを表示しようとしています。私は1つのビュー（WidgetView）を使用しており、そのビューに表示されているコンポーネントを変更しています。最初はウィジェットリストコンポーネント（WidgetComponent）を表示し、WidgetViewのWidgetComponentでウィジェットまたは新しいボタンを選択すると、WidgetComponentを交換してWidgetDetailsコンポーネントを表示し、そのコンポーネントに情報を渡します：

WidgetComponent.vue：

<template> 
... 
<router-link :to="{ path: '/widget_view', params: { widgetId: 'new' } }"><a> New Widget</a></router-link> 
<router-link :to="{ path: '/widget_view', params: { widgetId: widget.id } }"><span>{{widget.name}}</span></router-link> 
</template> 
<script> 
    export default { 
    name: 'WidgetComponent', 
    data() { 
     return { 
     widgets: [{ id: 1, 
     name: 'widgetX', 
     type: 'catcher' 
     }]} 
    } 
    } 
</script> 

WidgetView.vue

<template> 
    <component :is="activeComponent"></component> 
</template> 
<script> 
    import WidgetComponent from './components/WidgetComponent' 
    import WidgetDetail from './components/WidgetDetail' 
    export default { 
    name: 'WidgetView', 
    components: { 
     WidgetComponent, 
     WidgetDetail 
    }, 
    mounted: function() { 
     const widgetId = this.$route.params.widgetId 
     if (widgetId === 'new') { 
     // I want to pass the id to this component but don't know how 
     this.activeComponent = 'widget-detail' 
     } 
     else if (widgetId > 0) { 
     // I want to pass the id to this component but don't know how 
     this.activeComponent = 'widget-detail' 
     } 
    }, 
    watch: { 
     '$route': function() { 
     if (this.$route.params.widgetId === 'new') { 
      // how to pass id to this compent? 
      this.activeComponent = 'widget-detail' 
     } 
     else if (this.$route.params.widgetId > 0){ 
      // how to pass id to this compent? 
      this.activeComponent = 'widget-detail' 
     } 
     else { 
      this.activeComponent = 'widget-component' 
     } 
     } 
    }, 
    data() { 
     return { 
     activeComponent: 'widget-component', 
     widgetId: 0 
     } 
    } 
    } 
</script> 

WidgetDetail.vue

<template> 
<option v-for="manufacturer in manufacturers" > 
    {{ manufacturer.name }} 
</option> 
</template> 
<script> 
    export default { 
    props: ['sourcesId'], 
    ...etc... 
    } 
</script> 

router.js

Vue.use(Router) 

export default new Router({ 
    routes: [ 
    { 
     path: '/widget_view', 
     component: WidgetView, 
     subRoutes: { 
     path: '/new', 
     component: WidgetDetail 
     } 
    }, 
    { 
     path: '/widget_view/:widgetId', 
     component: WidgetView 
    }, 
    ] 

}）

私が働いルートparamersを取得couldntのが、私は、ルートすなわち

<router-link :to="{ path: '/widget_view/'+ 'new' }"> New Widget</router-link> 

にハードコーディングで働いルートを得ることができた。しかし、私は知りませんWidgetViewのスクリプト（テンプレートではない）コードからidを渡す方法

Answer 1

基本的な例はhttp://jsfiddle.net/ognc78e7/1/です。コンポーネントを保持する要素router-viewを使用してみてください。また、コンポーネント内のpropsを使用して、URLから変数を渡します。ドキュメントは、それをあなたがそれをしたいどの方法http://router.vuejs.org/en/essentials/passing-props.html

//routes 
{ path: '/foo/:id', component: Bar, props:true } 
//component 
const Bar = { template: '<div>The id is {{id}}</div>',props:['id'] } 

わからないくらい良く説明していますが、/foo/パスが実際に作成ウィジェットなり、その後、ダイナミック/foo/:idパスを持っている可能性があります。あるいは、私がここでやったようにすることができ、fooのパスは別のものにリンクする開始ページのようなものです。