用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 声明组件
var Fe={
template:`
<div>我是前端</div>
`
}
var Be={
template:`
<div>我是后端</div>
`
}
<!-- //创建路由对象 -->
var router=new VueRouter({
routes:[
{path:"/frontEnd",
component:Fe
},
{path:"/backEnd",
component:Be
}
]
})
var App={
template:`
<div>
<!-- router被渲染成a元素，to渲染成href属性 -->
<router-link to="/frontEnd">前端</router-link>
<router-link to="/backEnd">后端</router-link>
<!-- //路由的试图 -->
<router-view></router-view>
</div>
`
}
//router挂载到实例上
new Vue({
el:"#app",
router,
template:`
<App/>
`,
components:{
App
}
})
</script>
</body>
</html>