Question

在使用vue-router 2的VueJS 2中，我使用的父视图包含以下子组件：

WidgetContainer.vue with route / 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（其中＆＃39; 1＆＃39;是WidgetA中选择的ID），则从WidgetContainer中我想呈现WidgetB，但我无法解决：

1）如何将选定的widget ID传递给WidgetA中的router-link 2）如何在WidgetContainer中知道路由是/ widget_contaner / 1而不是/ widget_container /并相应地渲染WidgetB。

有什么想法吗？

Answer 1

使用Vuex会更容易，也更容易扩展吗？只提交id来存储而不是导航？

Answer 2

您可以通过发送事件将数据传递给父级，您可以在here和here周围查看更多详细信息。

数据更改后，您可以watch覆盖它并更新已存储窗口小部件的变量。

另一个选择是，如果组件之间的通信随着时间的推移变得无法管理，则使用某些中央状态管理，例如vuex，可以找到更多详细信息here。

VueJS vue-router将值传递给路由

2 个答案: