VueJS vue-router passing a value to a route

Question

In VueJS 2 with vue-router 2 I am using a parent view with subcomponents like this:

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>

In WidgetA I have the option of selecting a widget 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'
        }
      }
    }]})

From the WidgetContainer if the route is /widget_container/1 (where '1' is the id selected in WidgetA) I want to render WidgetB, but I cant work out:

1) how to pass the selected widget id into the router-link in WidgetA 2) How to know in WidgetContainer the the route is /widget_contaner/1 instead of /widget_container/ and render WidgetB accordingly.

Any ideas?

@Saurabh, done see routes.js section. Im really unsure about the path: 'widget_container/:id?' setup — Don Smythe, Mar 13 '17 at 08:33

score 1 · Answer 1 · answered Mar 13 '17 at 10:39

1

Wouldn't it be easier and more scallable to use Vuex for that? Just commit id to store and than navigate ?

answered Mar 13 '17 at 10:39

Marek Urbanowicz

12,659
16
62
87

score 1 · Accepted Answer · edited Jul 16 '22 at 00:35

1

You can pass data to parent using by emitting event, you can see more details around here and here.

Once the data is change, you can watch over it and update the variable which has stored your widget.

Another option, if communication between components become unmanageable over time is to use some central state management, like vuex, more details can be found here.

edited Jul 16 '22 at 00:35

tony19

125,647
18
229
307

answered Mar 13 '17 at 10:48

Saurabh

71,488
40
181
244

VueJS vue-router passing a value to a route

2 Answers2