<!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
>
<!-- 1引包 -->
<
script
src=
"./vue2.js"
>
<
/
script
>
<
script
src=
"./vue-router.js"
>
<
/
script
>
</
head
>
<!-- css样式 -->
<
style
>
* {
padding:
0;
margin:
0;
box-sizing:
border-box;
}
#box {
width:
500px;
height:
500px;
margin:
0
auto;
background:
skyblue;
}
#left {
width:
100px;
height:
500px;
border:
1px
solid
#f00;
float:
left;
}
#right {
width:
400px;
height:
500px;
border:
1px
solid
#f00;
float:
left;
}
#up {
width:
400px;
height:
100px;
border:
1px
solid
#f00;
}
#down {
width:
400px;
height:
400px;
}
<
/
style
>
<
body
>
<!-- 定义一个vue的管理区块，（MVVM中的View） -->
<
div
id=
"app"
>
<!-- 3设置跳转 -->
<
router-link
to=
"/layout"
>layout布局
</
router-link
>
<
router-link
to=
"/layout/login"
>登录
</
router-link
>
<
router-link
to=
"/layout/resign"
>注册
</
router-link
>
<!-- 6进行占位 -->
<
router-view
></
router-view
>
</
div
>
<
template
id=
"id"
>
<
div
id=
"box"
>
<
div
id=
"left"
>左边
</
div
>
<
div
id=
"right"
>
<
div
id=
"up"
>上面
</
div
>
<
div
id=
"down"
>
<!-- 6进行占位 -->
<
router-view
></
router-view
>
</
div
>
</
div
>
</
div
>
</
template
>
</
body
>
<
script
>
// 2注册组件
var
layout =
Vue.
extend({
template:
"#id"
});
var
login =
Vue.
extend({
template:
"<div>login</div>"
});
var
resign =
Vue.
extend({
template:
"<div>resign</div>"
});
// 4设置路由规则
var
router =
new
VueRouter({
routes: [{
name:
"layout",
path:
"/layout",
component:
layout,
children: [{
name:
"login",
path:
"login",
component:
login
},
{
name:
"resign",
path:
"resign",
component:
resign
},
]
}]
});
// 实例化vue对象（MVVM中的View Model）
new
Vue({
// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
el:
'#app',
data: {
// 数据 （MVVM中的Model）
},
methods: {},
// 5将路由规则绑定到实例里面去
router,
})
<
/
script
>
</
html
>