<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<style>
html,body {
margin: 0;
padding:0;
}
.header {
background-color: orange;
height: 80px;
}
.container {
width:100%;
display: flex;
height: 400px;
padding: 0;
margin: 0;
}
.left {
background-color: pink;
flex: 2;
}
.right {
background-color: bisque;
flex: 8;
}
</style>
<body>
<div id="app">
<router-view></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
</div>
<!-- 组件 -->
<template id="header">
<div class="header">
<h1>header</h1>
</div>
</template>
<template id="left">
<div class="left">
<h1>left</h1>
</div>
</template>
<template id="right">
<div class="right">
<h1>Right</h1>
</div>
</template>
<script>
// 创建组件
var header = {
template: '#header'
};
var left = {
template: '#left'
};
var right = {
template: '#right'
};
// 创建路由对象
var routerObj = new VueRouter({
routes: [
// { path : '/' , component : header },
// { path : '/left' , component : left},
// { path : '/right' , component : right}
{
path: '/',
components: {
'default': header,
'left': left,
'right': right
}
}
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {
},
router: routerObj
});
</script>
</body>
</html>
