<!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>测试</title>
<link rel="stylesheet" href="sass/element.css">
<script src="C:\text\vue.js"></script>
<script src="C:\text\vue-router.js"></script>
<script src="C:\text\element.js"></script>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
.header{
height: 50px;
background-color: blueviolet;
text-align: center;
font-size: 30px;
}
.left{
float: left;
width: 600px;
height: 1000px;
background-color: aqua;
text-align: center;
}
.table{
width: auto;
height: 1000px;
background-color: chocolate;
}
.foodbox{
float: left;
width: 6oopx;
height: 1000px;
}
.food{
display: inline-block;
width: 80px;
height: 20px;
text-align: center;
border-radius: 20%;
background-color: brown;
margin-right:5 px;
}
</style>
</head>
<body class="main">
<div id="demo-2" class="demo">
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name='table'></router-view>
</div>
<template id='left'>
<div class='left'>
<router-link class ='food' to='/food1'>食物一</router-link>
<router-link class ='food' to='/food2'>食物二</router-link>
<router-link class ='food' to='/food3'>食物三</router-link>
<router-link class ='food' to='/food4'>食物四</router-link>
<router-link class ='food' to='/food5'>食物五</router-link>
<router-link class ='food' to='/food6'>食物六</router-link>
<router-view></router-view>
</div>
</template>
<template id="table">
<div class='table' >
<table>
<tbody >
<tr>{{1}}</tr>
<tr>{{this.$parent.mes}}</tr>
</tbody>
</table>
</div>
</template>
<script>
var header={
template:"<div class='header'>这是一个头部</div>"
}
var lefter={
template: "#left"
}
var tabler={
template:"#table"
}
var food1={
template:"<h1>苹果</h1>"
}
var food2={
template:"<h1>香蕉</h1>"
}
var food3={
template:"<h1>火龙果</h1>"
}
var food4={
template:"<h1>葡萄</h1>"
}
var food5={
template:"<h1>西瓜</h1>"
}
var food6={
template:"<h1>橘子</h1>"
}
var routerObj =new VueRouter({
routes:
[
{path:'/',//原始路由组件页面
components:
{
default: header,
left :lefter,
table:tabler
},
children:[//孩子路由
{ path:'food1',component:food1},
{ path:'food2',component:food2},
{path:'food3',component:food3},
{ path:'food4',component:food4},
{ path:'food5',component:food5},
{ path:'food6',component:food6},
]
}
]
})
var vm= new Vue({
el: '#demo-2',
data: {
mes:"zhanghui",
items: [
{ message: 'Foo',age:'18'},
{ message: 'Bar', age:'20'},
]
},
components: {
},
router:routerObj
})
</script>
</body>
</html>
