400 vue命名视图：<router-view name="xxx"> </router-view>
导入 ： 有时候想同时 (同级) 展示多个视图，
需求 ： 访问 / 根目录，同时展示以下三个组件
- 三个组件
const header = {
template： `<p>header </p>`
}
const main = {
template： `<p>main </p>`
}
const footer = {
template： `<p>footer </p>`
}
- 规则
# 以前的那个方式只能显示三个 header
# 演示之前的效果
routes： [
{
path： '/'，
components： {
default： header，
m： main，
f： footer
}
}
]
- 出口
<router-view> </router-view>
<router-view name="m"> </router-view>
<router-view name="f"> </router-view>
08-命名视图.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
需求 : / => 三个组件 header main footer
-->
<div id="app">
<!-- 4. 出口 -->
<router-view></router-view>
<router-view name="m"></router-view>
<router-view name="f"></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3. 组件
const header = {
template: `<div>header组件</div>`
}
const main = {
template: `<div>main组件</div>`
}
const footer = {
template: `<div>footer组件</div>`
}
// 实例化
const router = new VueRouter({
// 2. 规则
routes: [{
path: '/',
components: {
default: header,
m: main,
f: footer
}
}]
})
const vm = new Vue({
router,
el: '#app',
data: {}
})
</script>
</body>
</html>
