子路由配置思路
在构建复杂单页应用时，父子路由的嵌套是常见需求。通过 children 字段，我们可以将特定路径下的组件进一步拆分，保持 URL 结构清晰的同时复用父级布局。
HTML 入口结构
主入口文件定义了全局的导航链接和渲染区域。注意 <router-view> 的位置，它决定了子组件挂载的点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/王花花">王花花</router-link>
<router-link to="/user/李双蛋">李双蛋</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script src="../lib/vue.js"></script>
<script src="../lib/router.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
路由规则定义
核心在于 routes 数组的配置。父级路径 /user/:name 捕获动态参数，而 children 中的路径是相对于父级的，不需要加斜杠前缀。
var routes = [ { path: '/', component: { template: ` <h2>首页</h2> ` } },{ path: '/about', component: { template: ` <h2>关于我们</h2> ` } },{ path: '/user/:name', component: { template: ` <div> <h2>我叫：{{$route.params.name}}</h2> <router-link to="/user/more" append>更多</router-link> <router-view></router-view> </div> ` }, children: [ { path: 'more', component: { template: ` <div>我叫{{$route.params.name}}，耶鲁留学生的 2000 张自拍照</div> ` } } ] } ];var router = new VueRouter({ routes: routes });
var app = new Vue({ el: '#app', router: router });
这里使用了 append 属性，确保子链接不会覆盖父级路径的参数。实际开发中，这种模式非常适合用户中心、文章详情等层级结构。
