請陛下批閱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>命名視圖實作經典布局</title>
<script src="../../vue/vue-v2.6.11.js"></script>
<script src="../../vue/vue-router-v3.1.6.js"></script>
<style>
hmtl, body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 0;
}
.container{
display: flex;
height: 600px;
}
.header {
background-color: blue;
height: 100px;
}
.left {
background-color: hotpink;
flex: 2;
}
.main {
background-color: orange;
flex: 8;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<template id="header">
<h1 class="header">這是header</h1>
</template>
<template id="left">
<h1 class="left">這是left</h1>
</template>
<template id="main">
<h1 class="main">這是main</h1>
</template>
</body>
<script>
var header = {
template: '#header'
};
var left = {
template: '#left'
};
var main = {
template: '#main'
};
var router = new VueRouter({
routes: [
{
path: "/",
components: {
// router-view沒設定name的,都顯示header這個元件
'default': header,
'left': left,
'main': main
}
}
]
});
var vm = new Vue({
el: '#app',
router: router
});
</script>
</html>
