单页应用
是无刷新，整个webapp就一个html文件，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html，所以叫单页面！
vue-router原理
vue-router通过hash与history两种方式实现前端路由的，'更新视图但不重新请求页面'是前端路由原理的核心之一。
在vue-router中提供mode参数来决定采用哪种方式，默认是hash
（1）mode:'hash': http://localhost:8080/#/recommend 多了“#”
（2）mode:'history'：http://localhost:8080/recommend
hash与history的区别：
hash模式url里面永远带着#号，在开发过程中默认使用这个模式。如果用户考虑到url的规范就需要使用history模式了。
hash的特点在于，hash虽然出现在url中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
hash模式（用户体验好）
原理：利用hashchange事件监听URL中（锚点）hash路由的变化。
window.addEventListener('hashchange',function(e){
console.log(e);
})
而history不怕前进和后退，就怕刷新，当刷新时，如果服务器没有相应的资源时，会报404错误。
history利用了html5新增的pushState()和replaceState()方法，应用于浏览器的历史记录栈。在当前以有的back、forward、go的基础上，他们提供了对历史纪录进行修改的功能.
两种模式比较：
一般的需求场景中，hash模式与histiry模式是差不多的，但是调用history.pushState()相比于直接修改hash主要有以下优势：
（1）pushState设置的新url可以是与当前url同源的任意url，而hash只可修改#后面的部分，故只可设置与当前同文档的url。
（2）pushState设置的新url可以与当前url一模一样，这样也会把记录添加到栈中，而hash设置的新值必须与原来不一样才会触发记录添加到栈中。
（3）pushState通过stateObject可以添加任意类型的数据，而hash只可添加短字符串。
路由：
<div id="app">
<h1>router</h1>
<!--通过to属性指定链接-->
<router-link to='/foo'>Go to Foo</router-link>
<router-link to='/bar'>Go to Bar</router-link>
<!--路由匹配的组件在此处渲染-->
<router-view></router-view>
</div><script>
//定义组件
const Foo={template:'<div>foo</div>'}
const Bar={template:'<div>bar</div>'}
const routes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]
//创建 router 实例，然后传 `routes` 配置
const router=new VueRouter({
routes
})
new Vue({
el:"#app",
router
})
</script>
嵌套路由，主要是由我们的页面结构所决定的。当我们进入到home页面的时候，它下面还有分类，如手机系列，平板系列，电脑系列。当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到手机的部分。
在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet, computer. Phone, tablet, compute 就相当于进入到了home的子元素。所以vue 提供了childrens 属性，它也是一组路由,相当于我们所写的routes。
首先，在home页面上定义三个router-link 标签用于导航，然后再定义一个router-view标签，用于渲染对应的组件。router-link 和router-view 标签要一一对应。home.vue 组件修改如下：
router.js 配置路由，修改如下：
const routes = [
{
path:"/home",
// 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
component: home,
// 子路由 children: [
{
path: "phone",
component: phone
},
{
path: "tablet",
component: tablet
},
// 当进入到home时，下面的组件显示
{
path: "",
component: phone
}
]}
]
来源：oschina
链接：https://my.oschina.net/u/4278466/blog/4012119