（此JSP文件在WebContent文件夹下）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="mydiv">
<div id="navigation_bar">
<router-link to="/school">学校</router-link>
<router-link to="/home">家庭</router-link>
</div>
<router-view></router-view>
</div>
<template id="schoolcomponent">
<div style=" 400px;height:200px;color: white;">
<div v-for="s in schoolList">
<span>{{s.id}}</span>
<span>{{s.schoolName}}</span>
</div>
</div>
</template>
<template id="homecomponent">
<div style=" 400px;height:200px;color: white;">
<div v-for="h in homeList">
<span>{{h.id}}</span>
<span>{{h.homeName}}</span>
</div>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script type="text/javascript">
var myModel = {
schoolList:[{id:1,schoolName:"南方IT学院"}],
homeList:[{id:001,homeName:"源河鸿景"}]
};
var schoolcomponent = {
template:'#schoolcomponent',
data:function(){
console.log(myModel.schoolList);
return myModel;
}
};
var homecomponent = {
template:'#homecomponent',
data:function(){
console.log(myModel.schoolList);
return myModel;
}
};
var routes = [
{path:'/school',component:schoolcomponent},
{path:'/home',component:homecomponent},
];
var router = new VueRouter({routes});
var myViewModel = new Vue({
router;
}).$mount('#mydiv');
</script>
</html>