通过设置/根路径,然后
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../util/vue-2.4.0.js"></script>
<script src="../util/vue-router-3.0.1.js"></script>
<link rel="stylesheet" href="../util/clear_float.css">
<style>
html,body,p{
margin: 0px;
padding: 0px;
}
.header{
background-color: pink;
height: 80px;
}
.container{
display: flex;
/*flex 弹性布局*/
height: 600px;
}
.left{
background-color: #5bc0de;
flex: 2;
}
.main{
background-color: #bce8f1;
flex: 8;
}
</style>
</head>
<body>
<div id="test">
<!--设置路由组件占位符-->
<router-view></router-view>
<div class="container">
<!--因为default只能指定显示一个组件,可以使用name指定组件-->
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<script>
//创建组件
var header = {
template:"<p class=\"header\">Header头部区域</p>"
}
var leftBox = {
template:"<p class=\"left\">left左侧边区域</p>"
}
var mainBox = {
template:"<p class=\"main\">main主题区域</p>"
}
//创建路由
var myrouter = new VueRouter({
routes:[
//页面加载的时候是默认#/的,所以添加一个页面加载就显示的默认组件
{path:"/",components:{ // 注意这里是多个组件,所以component 要带s ,复数
"default":header,
"left":leftBox,
"main":mainBox
}
}
]
})
var vm1 = new Vue({
el:"#test",
data:{},
methods:{},
created(){},
router:myrouter,
components:{}
})
</script>
</body>
</html>
