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

六、嵌套路由

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

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

示例

 
    <div id="app">
        <router-link to="/">首页router-link>
        <router-link to="/x">首页2router-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: `
                    

                        页面1
                        页面2

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

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