路由嵌套

html代码

<div id="app">
        <router-link to="/pzj" tag="span">彭忠杰</router-link>
        <router-link to="/myl" tag="span">马跃磊</router-link>
        <router-link to="/msy" tag="span">马士洋</router-link>
        <router-view></router-view>

js代码

<script>
    let pzj = {
        template: `<div>彭忠杰</div>`
    }
    let myl = {
        template: `<div>马跃磊</div>`
    }
    let msy = {
        template: `<div class="box"><div>马士洋</div>
                <router-link to="/msy/cs" tag="span">曹帅</router-link>
        <router-link to="/msy/dyn" tag="span">邓亚男</router-link>
        <router-link to="/msy/zc" tag="span">张成</router-link>
        <router-view></router-view>
                </div>`
    }

    let cs = {
        template: `<div>曹帅</div>`
    }

    let dyn = {
        template: `<div>邓亚男</div>`
    }

    let zc = {
        template: `<div>张成</div>`
    }

    let router = new VueRouter({
        routes: [{
                path: "/pzj",
                component: pzj
            },
            {
                path: "/myl",
                component: myl
            },
            {
                path: "/msy",
                component: msy,
                children: [{
                        path: "cs",
                        component: cs
                    },
                    {
                        path: "dyn",
                        component: dyn
                    },
                    {
                        path: "zc",
                        component: zc
                    },
                ]
            },

        ]
    })

    new Vue({
        el: '#app',
        router,
        data() {
            return {

            }
        },
    });
</script>