Question

vue-router中的嵌套视图很棒！

我有一些指向它们的链接，就像：

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

如果您知道vue-router，您将在此处看到路径项：

“俱乐部”是路由器路径，他在路由器中的名称是“团队”；
team.id_team是参数 teamId
“玩家”是子路径（具有相同的名称：“玩家”

它工作得很好，但是我更喜欢在：：代码中将其标记为JSON数据，但无法在嵌套视图中使用它。

Nested view doc

这是我喜欢使用的表格：

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

这是路由器：

{ 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,
        }

    ]},

如何更新最后一行以使用嵌套视图？

Answer 1

在使用子级路由时，需要确保在父级组件上有嵌套的<router-view />，在您的情况下为team。

您的团队模板应如下所示：

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

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

点击玩家后，它将被加载到嵌套的<router-view />

中

Vue和Vue-Router嵌套视图链接具有JSON格式的router-link

1 个答案: