VueJS Komponente anzeigen und Element an Komponente übergeben

Question

Ich verwende VueJS 2.0 und Vue-Router 2 und versuche, eine Vorlage basierend auf Route-Parameter anzuzeigen. Ich verwende eine Ansicht (WidgetView) und ändere die Komponenten, die in dieser Ansicht angezeigt werden. Zunächst zeige ich eine Widget-List-Komponente (WidgetComponent), dann, wenn die verwendete wählt ein Widget oder die neue Schaltfläche in der WidgetComponent in der WidgetView Ich möchte die WidgetComponent aus und zeigen Sie die WidgetDetails -Komponente, und Informationen an diese Komponente übergeben:

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

wissen 210

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 
    }, 
    ] 

})

könnte ich Route paramers bekommen arbeiten, aber ich schaffte es Strecken zu erhalten, indem hart arbeiten, um die Strecke Codierung dh

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

Aber ich nicht, wie man eine ID an die gegebene Vorlage aus dem Script-Code (nicht der Vorlage) in WidgetView übergibt.

Answer 1

Hier ist ein grundlegendes Beispiel http://jsfiddle.net/ognc78e7/1/. Verwenden Sie das router-view Element, um Ihre Komponenten zu halten. Verwenden Sie außerdem Props in Komponenten, um Variablen aus der URL zu übergeben. Die docs erklären es viel besser 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'] } 

nicht sicher, welche Art und Weise Sie es wollen, aber man konnte die /foo/ Pfad tatsächlich die Schaffung Widget sein und dann haben die dynamische /foo/:id Pfad. Oder Sie könnten tun, was ich hier getan habe, und der Pfad ist wie eine Startseite, die auf verschiedene Dinge verweist.