2、路由嵌套

 const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }
        const User = {
            template: `
                <div class="user">
                <h2>User {{ $route.params.id }}</h2>
                <router-view></router-view>
                </div>
            `
        }

 

const router = new VueRouter({
            routes: [
                { path: '/bar', component: Bar },
                { path: '/foo/:id', component: Foo },
                {
                    path: '/user/:id', component: User,
                    children: [
                        // 当 /user/:id/posts 匹配成功，
                        // posts 会被渲染在 User 的 <router-view> 中
                        { path: 'posts', component: posts },
                        { path: 'profile', component: Bar }，

　　　　　　　　　　　　　　 // 当 /user/:id 匹配成功，

                        // Bar 会被渲染在 User 的 <router-view> 中

                        { path: '', component: Bar }

                    ]
                }
            ]
        })

 

要注意，以 / 开头的嵌套路径会被当作根路径。

 

设置规则嵌套的路由默认显示

// 当 /user/:id 匹配成功，

// Bar 会被渲染在 User 的 <router-view> 中

{ path: '', component: Bar }