组件中的router-view无法渲染，求解

Question

app.vue中的router-view可以渲染，但index.vue中的router-view却无法渲染

main.js

window.Vue = require('vue');
import App from './components/App';
import router from './router';
const app = new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

router.js

import Vue from 'vue';
import Router from 'vue-router';
import Index from './components/index';
import Cate from './components/cate';

Vue.use(Router);
const router =  new Router({
    routes: [
        {path:'/index',component:Index},
        {path:'/cate',components:{container:Cate}},
    ]
});

export default router

app.vue

<template>
    <div>
        <router-link to="/index">首页</router-link>
        <br>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data(){
                
        }
    }

</script>

<style >

</style>

index.vue

<template>
    <div>
        <router-link to="/cate">点击再次跳转</router-link>
        <router-view name="container"></router-view>
    </div>
</template>


<style>
    
</style>

<script>
    export default {
        data() {
            return {

            }
        },

    };

</script>

cate.vue

<template>
    <div>
        栏目管理
    </div>
</template>

<script>
    export default {
        
    }

</script>

<style >

</style>

点击首页可以渲染，但点击“点击再次跳转”则无法渲染，本人菜鸟一枚，我已经被这个问题困扰了三天了，还请大神指教。

Answer 1

你需要嵌套路由

Answer 2

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Index from './components/index';
import Cate from './components/cate';

Vue.use(Router);
const router =  new Router({
    routes: [
        {path:'/index',component:Index},
        {path:'/cate',components:{\
            // 这里的每一条和  /cate 都是平级的关系
            default:  Cate
            container: Cate
        }},
    ]
});

export default router

// app.js
<template>
    <div>
        <router-link to="/index">首页</router-link>
        <router-link to="/cate">首页</router-link>
        <br>
        <router-view></router-view>
        <router-view name="container"></router-view>
    </div>
</template>
 

// index.js
<template>
    <div>
        <router-link to="/cate">点击再次跳转</router-link>
        /** 删除 <router-view name="container"></router-view> */
    </div>
</template>