嵌套路由的应用
从文档中可知，嵌套路由的应用场景为，能够依据提供的URL来拜访对应层级的组件，并将子组件的内容，渲染至上一级的< router-view >中
文档给出的图示：
/user/foo/profile /user/foo/posts+------------------+ +-----------------+| User | | User || +--------------+ | | +-------------+ || | Profile | | +------------> | | Posts | || | | | | | | || +--------------+ | | +-------------+ |+------------------+ +-----------------+嵌套路由的构建
咱们晓得，创立一个路由配置须要path和component两个字段
const User = { template: "<div>this is a user</div>"}const router = new VueRouter({ routes:[ { // 路由拜访门路 path: "/user/foo", // 门路拜访的组件 component: User } ]})那么嵌套路由呢？ 咱们须要这是须要一个新的字段children，这是一个数组数组，外面蕴含的，就是咱们下一层级拜访的路由对象
const router = new VueRouter({ routes:[ { // 路由拜访门路 path: "/user/foo", // 门路拜访的组件 component: User, children: [ { path: "profile", component: Profile } ] } ]})这样，咱们就能够通过/user/foo/profile 这个门路，来拜访Profile组件，并将其渲染在父级组件的router-view中，这个嵌套关系能够始终继续上来，门路多写层，小问题
嵌套路由的动静匹配
在文档提及动静路由匹配的时候，举出了一个例子
| 模式 | 匹配门路 | URL传参（$route.params） |
|---|---|---|
| /user/:username | /user/evan | { username: 'evan' } |
例子阐明，URL中存在/:xxx格局的子门路，那么在路由中就会主动匹配成/xxx这样的子门路，同时，router会将参数格式化成一个对象 ，可应用this.$route.params拜访该对象，若门路中无参数，则该对象为{}
咱们晓得单层路由能够通过这样的动静参数进行匹配，那么嵌套路由能够吗？
咱们先批改一下路由的配置
<!-- 咱们定义id为customid --><router-link to="/user/customid/profile">Profile</router-link> const User = { template: ` <div> <h2>User {{$route.params.id}}</h2> <router-view></router-view> </div> ` } const Profile = { template: "<div>Profile {{$route.params.id}}</div>" } const router = new VueRouter({ routes: [ { path: "/user/:id", component: User, children: [ { path: "profile", component: Profile } ] } ] })这是，浏览器关上html文件，会显示
router-link转换后的a标签，以及路由拜访到的组件都曾经被渲染
残缺代码
<html><header> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script></header><body> <div id="app"> <router-link to="/user/customid/profile">Profile</router-link> <router-view></router-view> </div> <script> const User = { template: ` <div> <h2>User {{$route.params.id}}</h2> <router-view></router-view> </div> ` } const Profile = { template: "<div>Profile {{$route.params.id}}</div>" } const router = new VueRouter({ routes: [ { path: "/user/:id", component: User, children: [ { path: "profile", component: Profile } ] } ] }) new Vue({ router }).$mount('#app') </script></body></html>