Vue路由 - 路由嵌套
程序员文章站
2022-06-02 20:15:37
...
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
<body>
<div id="app">
<router-link to="/user/张三">张三</router-link>
<router-link to="/user/李四">李四</router-link>
<router-view></router-view>
</div>
<script src="libs/vue/vue.js"></script>
<script src="libs/vue-router/vue-router.js"></script>
<script>
var user = {
template: `
<div>
<div>我叫{{$route.params.name}}</div>
<router-link to="more" append>更多信息</router-link>
<router-view></router-view>
</div>
`,
}
var more = {
template: `
<div>
<p>用户{{$route.params.name}}详细信息</p>
<p>aaaaaaaaaaaaaaaaa</p>
</div>
`,
}
var routes = [
{
path: '/user/:name',
component: user,
children: [
{
path: 'more',
component: more
}
]
}
];
var router = new VueRouter({
routes: routes
});
// 4. 创建根实例
var vm = new Vue({
el: '#app',
router: router,
})
</script>
</body>