实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，
代码语言：javascript复制<body class="">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<div id="app">
<p>
<router-link to="/user/foo">user/foo</router-link>
<router-link to="/user/bar/profile">user/bar/profile</router-link>
<router-link to="/user/foo/posts">user/foo/posts</router-link>
</p>
<router-view></router-view>
</div>
<script>
const User ={
template:`
<div class="user">
<h2>{{$route.params.id}}</h2>
<router-view></router-view>
</div>
`
}
const UserHome={template:`<div>Home</div>`}
const UserProfile={template:`<div>Profile</div>`}
const UserPosts ={template:`<div>Posts</div>`}
const router = new VueRouter({
routes:[
{path:"/user/:id",component:User,
children:[
{path:'',component:UserHome},
{path:'profile',component:UserProfile},
{path:'posts',component:UserPosts},
]
}
]
})
const app = new Vue({router}).$mount("#app")
</script>
</body>(adsbygoogle = window.adsbygoogle || []).push({});
