Vue and vue-router nested view links having router-link in JSON format

Question

Nested views, in vue-router, are greats!

I have a few of links point to them just like:

<router-link :to="'/club/'+team.id_team+'/players'">Players</router-link>

If you know vue-router you will see here the path items:

"club" is the router path, his name in the router is "team";
team.id_team is the params teamId
"players" is the children path (which has the same name: "players"

It works nice but I prefer to write my code in :to tag as JSON data but I'm not able using it with nested view.

Nested view doc

This is the form I like to use:

:to="{name:'team',params: {teamId:team.serie_id}}"

And this is the router:

{ path: '/club/:teamId',

    name:'team',

    component: team,

    children :[

        {
            name:'players',
            path: 'players',
            component: teamPlayers,
        },

        {
            name:'staff',
            path: 'staff',
            component: teamStaff,
            params: true,
        },

        {
            name:'table',
            path: 'table',
            component: teamTable,
            params: true,
        }

    ]},

How to update this last line to use the nested view?

did you try :to="{path:'club/'+team.id_team , name:'team',params: {teamId:team.serie_id}}" — ishay m
Thanks @ishaym the :to="{name:'team',params: {teamId:team.serie_id}}" works but I need to add the children name ("players") here. I have done some tests but it dosn't work — Uncoke
Can you post your router file, all depends how you've set up your nested routes. might as simple as changing the name from team to players in your router link — Rich
@Rich thanks for your help. I've just updated my post showing the router about team page — Uncoke
Have you tried :to="{ name: 'players', params: { teamId: team.serie_id } }"? — Rich

Rich Rich · Accepted Answer · 2019-06-29T16:53:58

When you're using a children routes, you need to make sure you have a nested <router-view /> on your parent component, in your case that's team.

Your team template should look something like this:

<template>
    <div>
        <router-link :to="{
            name: 'players',
            params: { teamId: 1 }
        }">Players</router-link>

        <router-view />
    </div>
</teamplate>

When players is clicked, it will then be loaded within the nested <router-view />

Vue and vue-router nested view links having router-link in JSON format

1 Answers