Vue笔记--Router路由--VueRouter--六、嵌套路由

六、嵌套路由

​ 路由由多层嵌套的组件组合而成，这时就需要使用嵌套路由配置

​ 路由使用children属性进行嵌套路由中的子路由设置

示例

 <!-- 嵌套路由 -->
    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/x">首页2</router-link>

        <router-view></router-view>
    </div>

 <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const routes = [{
                path: '/',
                component: {
                    template: `
                    <div>
                        <router-link to="/index_page1">页面1</router-link>
                        <router-link to="/index_page2">页面2</router-link>

                        <router-view></router-view>
                    </div>
                    `
                },
                // 设置子路由
                children: [{
                        path: 'index_page1',
                        component: {
                            template: `
                        <div> 
                            <router-link to="/index_page1/content1">内容1</router-link>
                            <router-view></router-view>
                        </div>
                        `
                        },
                        // 子路由
                        children: [{
                            path: 'content1',
                            component: {
                                template: `<div>内层子路由content1</div>`
                            }
                        }]
                    },
                    {
                        path: 'index_page2',
                        component: {
                            template: `<div>子路由index_page2</div>`
                        }
                    }
                ]
            },
            {
                path: '/x',
                component: {
                    template: `<div>xxxx内容</div>`
                }
            }
        ]
        const router = new VueRouter({
            routes
        })

        new Vue({
            el: '#app',
            router
        })
    </script>