实际场景中,路由通常由多层嵌套的组件组合而成,这时需要使用嵌套路由配置。

    ·使用children来进行嵌套路由中的子路由设置

    嵌套路由 - 图1

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <router-link to=“/user”>用户功能</router-link> <router-view></router-view> </div> <script src=“./lib/vue.js”></script> <script src=“./lib/vue-router.js”></script> <script> var User = { template: `

    这是 User 组件的功能

     爱好功能 用户信息
    ` }; var UserHobby = { template: <div> UserHobby 组件</div> }; var UserInfo = { template: `
    UserInfo 组件 学校信息
    ` }; var UserInfoSchool = { template: <div> UserInfoSchool 组件</div> }; var routes = [ { path: ‘/user’, component: User, children: [ { path: ‘hobby’, component: UserHobby }, { path: ‘info’, component: UserInfo, children: [ { path: ‘school’, component: UserInfoSchool }, ] } ] } ]; var router = new VueRouter({ routes }); var vm = new Vue({ el: ‘#app’, router }); </script> </body> </html>