在Vue Router的文档中：https://router.vuejs.org/en/essentials/nested-routes.html我们有能力创建一些嵌套路由 . 但是，这需要主路由器知道所有子路由 .

我想要的是每个Vue组件都能够从自身管理它自己的内部路由组件，并使用base参数从父路由器插入它 .

有没有办法使用更多的路由器？让每个组件管理自己的路由器系统？正如Express.js允许的那样：http://expressjs.com/en/guide/routing.html#express-router

我试过这个例子允许一个真正的URL系统 history 模式和一个组件，另一个路由器在 hash 模式下使用tab：

var test = new Vue({
    ...
    template: `
        <router-view></router-view>
    `,
    router: new VueRouter({
        mode: 'history',
        routes: [{
            path: '/',
            component: {
                ...
                template: `
                    <p>Accueil</p>
                `
                ...
            }
        }, {
            path: '/test/',
            component: {
                ...
                template: `<div>
                    <p>Test</p>
                    <router-view></router-view>
                </div>`
                router: new VueRouter({
                    mode: 'hash',
                    base: '/test/',
                    routes: [{
                        path: '/',
                        component: {
                            ...
                            'template': `
                                <div>Tab1</div>
                            `
                            ...
                        }
                    }, {
                        path: '/tab2/',
                        component: {
                            ...
                            'template': `
                                <p>Tab2</p>
                            `
                            ...
                        }
                    }]
                }
                ...
            }
        }]
    }
   ...
});

第一级按预期工作：

`/` display `<p>Accueil</p>`

但我内心深处

`/test/` that display `<div><p>Test</p><!----></div>`
`/test/item2/` that display `<div><p>Test</p><!----></div>`

我期待着这一点

`/test/` that display `<div><p>Test</p><p>Item1</p></div>`
`/test/item2/` that display `<div><p>Test</p><p>Item2</p></div>`

What's wrong ? I think it's because <router-view></router-view> in nested component refer to first router, not the second one? There is no way to create a <custom-router-view></custom-router-view> to create a router inside a component (itself managed by a router) ?

编辑：我提供了一个JSFIDDLE我希望如何工作

nested vuejs2 vue-router