導入 ： 有時候想同時 (同級) 展示多個視圖，
需求 ： 訪問 / 根目錄，同時展示以下三個組件
- 三個組件
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>