<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vueRouter.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
<router-link to="/index1">1page</router-link>
<router-link to="/index2">2page</router-link>
<router-link to="/index3">3page</router-link>
</div>
<script>
// 创建一个路由
var router = new VueRouter({
routes:[
{
path:'/index1',
component:{
template:`
<div>路由第一页</div>
`
}
},
{
path:'/index2',
component:{
template:`
<div>路由第2页</div>
`
}
},
{
path:'/index3',
component:{
template:`
<div>路由第3页</div>
`
}
}
]
})
new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>