<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/vue-router-3.0.1.js"></script>
</head>
<style>
h1,html.body{
margin:0;
padding: 0;
}
h1 {
font-size:16px;
}
.header{
background-color:orange;
}
.container{
display: flex;
height:600px;
}
.left{
background-color: lightgreen;
flex:2;
}
.main{
background-color: lightpink;
flex:8;
}
</style>
<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>
<script>
was header = {
template: '<h1 class = "header"> header head region </ h1>'
};
was leftBox = {
template: '<h1 class = "left"> Left sidebar region </ h1>'
};
was Mainbox = {
template: '<h1 class = "main"> main body region </ h1>'
};
var = new router VueRouter ({
routes: [{
path: '/',
components: {// Note, the portion s of the added components. It shows a path hanging in three subassemblies
// This section quotes, you can not write, the system will automatically add the phrase, is the component name
'Defalut': header,
'left': leftBox,
'main': mainBox
}
}]
})
// Create Vue instance, get ViewModel
There vm = new Vue ({
on: '#app'
data: {},
methods: {},
router
});
</script>
</body>
</html>