Vuejs Vue-Router将值传递到路线

Question

在vuejs 2中使用vue-router 2我使用的是带有这样的子组件的父视图：

widgetContainer.vue与路由/widget_container/：

<template>
  <component :is="activeComponent"></component>
</template>
<script>
  import WidgetA from './components/WidgetA'
  import WidgetB from './components/WidgetB'
  export default {
    name: 'WidgetContainer',
    components: {
      WidgetA,
      WidgetB
    },
    data () {
      return {
        activeComponent: 'widget-a'
      }
    }
  }
</script>

在Widgeta中，我可以选择一个小部件ID

<template>
// v-for list logic here..
<router-link :to="{ path: '/widget_container/' + widget.id }"><span>{{widget.name}}   </span></router-link>
</template>
<script>
    export default {
    name: 'WidgetA',
    data() {
      return {
        widgets: [
          { id: 1,
            name: 'blue-widget'
          }]}}

routes.js：

export default new Router({
  routes: [
    {
      path: '/widget_container',
      component: WidgetContaner
    },
    {
      path: '/widget_container/:id?',
      redirect: to => {
        const { params } = to
        if (params.id) {
          return '/widget_contaner/:id'
        } else {
          return '/widget_container'
        }
      }
    }]})

如果路由为/widget_container/1（其中'1'是widgeta中选择的ID），我想渲染widgetB，但我无法锻炼：

1）如何将所选的小部件ID传递到Widgeta中的路由器链接中2）如何在widgetContainer中知道路线是/widget_contaner/1而不是/widget_container/和渲染widgetB。

有什么想法？

Answer 1

您可以通过发射事件将数据传递给父母，您可以在此处和此处查看更多详细信息。

数据发生变化后，您可以查看它并更新存储您的小部件的变量。

另一个选择，如果随着时间的流逝，组件之间的通信变得难以管理，就是使用一些中央状态管理，例如Vuex，可以在此处找到更多详细信息。

Answer 2

为此使用vuex难道不容易，更易于丑闻？只需提交ID即可存储并导航？