（此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="width: 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="width: 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>