VueJS組件顯示並傳遞組件

我正在使用VueJS 2.0和vue-router 2，並試圖根據路由參數顯示一個模板。我正在使用一個視圖（WidgetView）並更改該視圖中顯示的組件。最初，我顯示了一個窗口小部件列表組件（WidgetComponent），然後當用戶在WidgetView的WidgetComponent中選擇一個窗口小部件或新按鈕時，我想將WidgetComponent交換出來並顯示WidgetDetails組件，並將信息傳遞給該組件：VueJS組件顯示並傳遞組件

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工作，但我設法通過辛勤工作路徑編碼的路線即

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

但我不知道如何通過WidgetView中的腳本（而非模板）代碼將ID傳遞給給定的模板。

來源

2017-03-17 Don Smythe

這裏是一個基本的例子http://jsfiddle.net/ognc78e7/1/。嘗試使用router-view元素來保存組件。此外，使用組件內的道具來傳遞來自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路徑就像是一個鏈接到不同事物的起始頁面。

來源

2017-03-17 03:50:08 qw3n

VueJS組件顯示並傳遞組件

回答

相關問題