Javascript VueJS组件显示并将项传递给组件

我正在使用VueJS 2.0和vue router 2，并尝试根据路由参数显示模板。我正在使用一个视图（WidgetView）并更改该视图中显示的组件。最初，我显示一个小部件列表组件（WidgetComponent），然后当用户在WidgetView中选择一个小部件或WidgetComponent中的new按钮时，我希望将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>

})

我无法让路线参数工作，但我通过硬编码路线ie成功地让路线工作

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

newwidget

但是我不知道如何从WidgetView中的脚本（而不是模板）代码向给定模板传递id。

这里是一个基本示例。尝试使用

路由器视图

元素保存组件。另外，在组件内部使用道具从URL传入变量。医生解释得更好

//路由
{path:'/foo/:id'，component:Bar，props:true}
//组成部分
const Bar={template:'id为{{id}}'，props:['id']}

不确定您希望使用哪种方式，但您可以将

/foo/

路径实际用作创建小部件，然后使用动态

/foo/:id

路径。或者你可以像我在这里做的那样，foo路径就像一个链接到不同事物的起始页

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

Vue.use(Router)

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

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

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