<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/vue-router_3.0.2.js"></script>
<style>
li{
list-style: none;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
}
.box{
border: 10px solid red;
}
.ulli li{
float: left;
width: 100px;
height: 50px;
line-height: 50px;
border: 1px solid blue;
margin-right: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/regis">Regis</router-link>
<router-view></router-view>
</div>
<script>
const User = {
template:'<h1>User 组件</h1>'
}
const Regis = {
template:`
<div>
<h1>Regis 组件</h1>
<hr/>
<!-- 子路由链接 -->
<router-link to="/regis/tab1">tab1</router-link>
<router-link to="/regis/tab2">tab2</router-link>
<!-- 子路由占位符 -->
<router-view></router-view>
</div>
`
}
const Tab1 = {
template:'<h3>tab1 子组件</h3>'
}
const Tab2 = {
template:'<h3>tab2 子组件</h3>'
}
const router = new VueRouter({
routes:[
{path:'/',redirect:'/user'},
{path:'/user',component:User},
{
path:'/regis',
component:Regis,
children:[
{path:'/regis/tab1',component:Tab1},
{path:'/regis/tab2',component:Tab2}
]
}
]
})
var vm = new Vue({
el:'#app',
data:{
},
router:router,
components:{
}
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96