Question

在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模式使用标签：

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>`

怎么了？我认为这是因为嵌套组件中的<router-view></router-view>是指第一个路由器，而不是第二个路由器？无法创建<custom-router-view></custom-router-view>来在组件内创建路由器（由路由器管理）？

编辑：我提供了一个JSFIDDLE，我希望它的工作原理

https://jsfiddle.net/6du90epg/553/

Vue 2嵌套路由器（不是嵌套路由）

0 个答案: