Vue-router 路由嵌套

例：页面中一级导航  首页+ 新闻 +体育

二级导航 ：首页 > 关于我们+ 联系我们

体育> 足球 + 篮球 + 排球

三级导航：联系我们> 北京 + 上海

在路由参数中怎加一个children属性，值是一个数组，数组内部是一个个路由 JSON数据。

children内部是二级路由的参数，和一级的配置是一样的，所以，如果需要三级路由，还可以继续设置children，无限嵌套。

index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
//import Home from '../views/Home.vue'
// import News from '../views/News.vue'
// import Sports from '../views/Sports.vue'
Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
let router = new VueRouter({
    mode:'history',
    //linkActiveClass:'globalCur',
    routes:[
        {
            path:'/home',
            component:()=> import('@s/views/Home'),
            children:[
                {
                    path:'about',
                    component:()=> import('@s/views/About')
                },
                {
                    path:'contact',
                    component:()=> import('@s/views/Contact'),
                    children:[
                        {
                            path:'beijing',
                            component:()=>import('@s/views/Beijing')
                        },
                        {
                            path:'shanghai',
                            component:()=>import('@s/views/Shanghai')
                        }
                    ]
                }
            ]
        },
        {
            path:'/news',
            name:'news',
            component:()=>
                import('@s/views/News')
        },
        {
            path:'/sports',
            name:'sports',
            component:()=> import('@s/views/Sports'),
            children:[
                {
                    path:'basketball',
                    component:()=> import('@s/views/Basketball')
                },
                {
                    path:'footerball',
                    component:()=> import('@s/views/Footerball')
                },
                {
                    path:'volleyball',
                    component:()=> import('@s/views/Volleyball')
                }
            ]
        }
    ]
})
export default router

app.vue

<div class="box">
    <div class="nav" @click="toHome" >首页</div>
    <div class="nav" @click="toNews">新闻</div>
    <div class="nav" @click="toSport">体育</div>
</div>

methods:{
    toHome(){
        let obj = {
            path : '/home',
            query:{
                a:1,
                b:2,
                c:3
            }
        }
        this.$router.push(obj)
    },
    toNews(){
        let obj = {
            name:'news',
            params : {
                q:1,
                w:2,
                e:5
            }
        }
        this.$router.push(obj)
    },
    toSport(){
        let obj = {
            name:'sports',
            params : {
                q:1,
                w:2,
                e:5
            }
        }
        this.$router.push(obj)
    }
}

home.vue

<template>
    <div>
        <ul>
            <li @click="changeRouter('/about')">关于我们</li>
            <li @click="changeRouter('/contact')">联系我们</li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    methods:{
        changeRouter(val){
            this.$router.push('/home' + val)
        }
    }
}
</script>

contact.vue

<template>
    <div>
        <ul>
            <li @click="changeRouter('beijing')">北京</li>
            <li @click="changeRouter('shanghai')">上海</li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    methods:{
        changeRouter(val){
            this.$router.push('/home/contact/' + val)
        }
    }
}
</script>