<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由的嵌套</title>
</head>
<body>
<div id="app">
<!-- 如果没有/ ，会默认在后面拼上当前的路径；需要回到根路径上；给路径加上/;-->
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/detail" tag="button">详情页</router-link>
<router-view></router-view>
</div>
<template id="detail">
<div>
<!--当前profile和about是detail的一个子路由；-->
<router-link to="/detail/profile" tag="button">个人中心</router-link>
<router-link to="/detail/about" tag="button">关于我</router-link>
<router-view></router-view>
</div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 1.创建组件
let home = {template:"<div>首页</div>"};
let list = {template:"#detail"};
let profile = {template:"<div>profile</div>"};
let about = {template:"<div>about</div>"};
//2.配置路由的映射表
let routes = [
{path:"/home",component:home},
{path:"/detail",component:list,
// children : 配置当前路由的子路由；
children:[
// 子路由中不需要带/ ;如果加上/,相当于一级路由；
// 如果路由写到children中，会path进行了一个拼接；
{path:"profile",component:profile},
{path:"about",component:about}
]
},
{path:"*",component:home}
];
let router = new VueRouter({
routes
})
let vm = new Vue({
el: '#app',
data: {},
router
});
</script>
</body>
</html>
本站以现代、古代情诗为主，情诗网创办于2013年，以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读；可以放在浏览器的收藏夹中（快捷键Ctrl+D）;或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享；情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿！喜欢本站的话请大家把本站告诉给你朋友哦！地址是 www.qingshiwang.com ！