导入 ： url测试 parent 和child， 想让child 在 parent 中显示
- parent 的内部 添加 ：
<router-view> </router-view> - 规则里添加 children
- /child 和 child 的区别
- 如果是
/child=> 直接访问#/child就可以访问 子组件 - 如果是
child=> 访问#/parent/child才可以访问子组件
- 如果是
const parent = {
template： `<p>parent <router-view> </router-view> </p>`
}
const child = {
template： `<p>child</p>`
}
const router = new VueRouter({
routes： [
{
path： '/parent'，
component： parent，
children： [
{ path： '/child'， component： child }
]
}
]
})
07-嵌套路由.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1. 入口 -->
<!--
需求: child组件 放到 parent组件 里面
办法: children: [路由规则]
-->
<!-- 4. 出口 -->
<router-view></router-view>
<hr />
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3. 组件
const parent = {
template: `<div> parent组件 -- <router-view></router-view> </div>`
}
const child = {
template: `<div>child组件</div>`
}
// 实例化
const router = new VueRouter({
// 2. 规则
routes: [{
path: '/parent',
component: parent,
children: [{
// 子组件的path值前，加斜杆/，则浏览器的url中不需要写成 /parent/child，直接写/child即可。不加的话，就要写成 /parent/child
path: '/child',
component: child
}],
// children: [{
// path: 'child',
// component: child
// }]
// path : '/child' => 哈希值 : /child
// path : 'child' => 哈希值 : /parent/child
}]
})
const vm = new Vue({
router,
el: '#app',
data: {}
})
</script>
</body>
</html>