Vue全家桶之Vue-router（前后端路由、嵌套、动态匹配、编程式导航）

1. Vue全家桶之前端路由

1.1 路由的基本概念和原理

1.1.1 路由

（1）路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。

那么url地址和真实的资源之间就有一种对应的关系，就是路由。

（2）路由分为前端路由和后端路由

后端路由是由服务器端进行实现，并完成资源的分发。

前端路由是依靠hash值(锚链接)的变化进行实现

1.1.2 后端路由

（1）概念：根据不同的用户URL请求，返回不同的内容

（2）本质：URL请求地址与服务器资源之间的对应关系

1.1.3 SPA

（1）后端渲染（存在性能问题）

（2）Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）

（3）SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进后退操作

（4）SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash变化不会触发新的URL请求）

（5）实现SPA最核心的技术是前端路由

1.1.4 前端路由

（1）概念：根据不同的用户事件，返回不同的页面内容

（2）本质：用户事件与事件处理函数之间的对应关系

（3）初体验：前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）

核心实现依靠一个事件，即监听hash值变化的事件

window.onhashchange = function(){    
    //location.hash可以获取到最新的hash值    
    location.hash
}

（4）前端路由实现tab栏切换：