With vue.js, how can I set up a dynamic router-link with embedded children?

Question

My router.js has some embedded children:

routes: [{
            path: '/',
            name: 'login',
            component: Login,
        },
        {
            path: '/app',
            component: Container,
            children: [{
                path: '',
                name: 'ConversationsList',
                component: ConversationsList
            }, {
                path: 'call',
                name: 'Call',
                component: Call
            }, {
                path: 'conversation/:id',
                name: 'ConversationDetail',
                component: ConversationDetail,
                children: [{
                    path: '',
                    name: 'ConversationDetailHighlights',
                    component: ConversationDetailHighlights

                }, {
                    path: 'transcript',
                    name: 'ConversationDetailFullTranscript',
                    component: ConversationDetailFullTranscript

                }]
            }]

        },
    ],

My current route is /app/conversation/:id and I want my template to have a link to /app/conversation/:id/transcript. How do I accomplish this with vue.js?

score 1 · Accepted Answer · answered Jul 08 '19 at 14:54

1

If I understood the question correctly, this should do:

<router-link
  :to="{
    name: 'ConversationDetailFullTranscript',
    params: {
      id: 'some-id'
    }
  }">
  View full transcript
</router-link>

answered Jul 08 '19 at 14:54

Yom T.

8,760
2
32
49

1

Friggin brilliant - and easy. Thanks! – Shamoon Jul 08 '19 at 14:55
The route names help, otherwise, we would have to pass the full paths, as in [this example](https://jsfiddle.net/yyx990803/L7hscd8h/). – Yom T. Jul 08 '19 at 14:59

With vue.js, how can I set up a dynamic router-link with embedded children?

1 Answers1