VueJS vue-router 将值传递给路由

Question

在带有 vue-router 2 的 VueJS 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'
        }
      }
    }]})

从 WidgetContainer 如果路由是 /widget_container/1（其中“1”是在 WidgetA 中选择的 id）我想渲染 WidgetB，但我无法解决：

1) WidgetA中如何将选中的widget id传入router-link 2) 如何在 WidgetContainer 中知道路由是 /widget_contaner/1 而不是 /widget_container/ 并相应地呈现 WidgetB。

有什么想法吗？

Answer 1

使用 Vuex 会不会更容易、更可扩展？只需将 id 提交到存储而不是导航？

Answer 2

您可以通过发射事件将数据传递给父级，您可以在 and 附近查看更多详细信息。

一旦数据发生变化，您可以watch对其进行更新并更新存储了您的小部件的变量。

如果组件之间的通信随着时间的推移变得难以管理，另一种选择是使用一些中央状态管理，例如 vuex, more details can be found here。

VueJS vue-router 将值传递给路由

VueJS vue-router passing a value to a route

vue.js

vue-router

vuejs2