Six, Vue Router nested routing

Nested routing

Set in the entry template <router-view>is the top export. Subassembly may be nested <router-view>sub-route matches outlet.

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

To render nested components exports, you need VueRouterthe configuration parameterschildren

<script>
    const router = new VueRouter({
        routes: [
            {
                path: '/user/:id'，
                component: User,
                // 自路由配置
                children: [
                    // 当 /user/:id/profile 匹配成功
                    // 则会在子路由出口中渲染 UserProfile 组件
                    { path: 'profile', component: UserProfile }
                ]
            }
        ] 
    });
</script>

Note: In Zi Central /nested path will be treated as the beginning of the root path. If you want to achieve /user/123, in the sub-path routing configuration can not be with /. If there is /, the match is/123

In Central Zi, you must provide the child with an empty routing path. So that when you match the parent route path, empty sub-routing component is rendered, it would not