Vue 和 vue-router 嵌套视图 links 具有 JSON 格式的 router-link

Question

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

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

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

如果你知道 vue-router 你会在这里看到路径项：

"club"是router路径，他在router中的name是"team";
team.id_team 是参数 teamId
"players" 是子路径（同名："players"

它工作得很好，但我更喜欢在 :to 中编写我的代码作为 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 嵌套视图 links 具有 JSON 格式的 router-link

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

nested

vue.js

vue-router