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
– Don Smythe, Commented Mar 13, 2017 at 8:33

tony19 · Accepted Answer · 2022-07-16 00:35:51Z

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, 2022 at 0:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 13, 2017 at 10:48

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marek Urbanowicz · Accepted Answer · 2017-03-13 10:39:27Z

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, 2017 at 10:39

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

Collectives™ on Stack Overflow

VueJS vue-router passing a value to a route

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related