什么是路由？
传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的 处理逻辑。这样就完成了一次路由分发，即后端控制路由。
后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的出现，页面实现了非重载就能刷新数据， 让前端也可以控制url自行管理，前端路由由此而生。
前端路由的核心，就在于 改变视图的同时不会向后端发出请求。为了达到这一目的，Vue Router 提供了以下两种支 持：
hash模式( # ): 这个 # 就是hash符号，中文名哈希符或锚点，然后哈希符后面的值，我们称之为哈希值。路由 的哈希模式其实是利用了 window可以监听onhashchange 事件,根据 监听 hash 值的变化，来做出一些响应，这 么一来，即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载。 Vue 路由的默认模式,切 换配置 mode: 'history'
history模式 : 路由的history模式，是由H5新推出的两个神器：pushState与replaceState，前端路由开始进 化，前面的 onhashchange 只能改变#后面的url片段，而history api则给了前端完全的自由,地址可以随意更 改，这两个神器可以将url替换并且不刷新页面，好比挂羊头卖狗肉，http并没有去请求服务器该路径下的资 源，但是一旦刷新就会暴露这个实际不存在的 [羊头] ，显示404错误。
总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。前端路由是不涉 及服务器的，利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。
入门案例
cnpm install vue-router --save #安装路由
或者直接引入
动态路径参数
传统路径参数 使用?键值对的形式传递，当匹配到一个路由时，参数值会被设置到 this.$route.query ，值得注意 的时，在路由匹配规则中 path 值不需要加参数信息。
动态路径参数使用冒号 : 标记，当匹配到一个路由时，参数值会被设置到 this.$route.params ，可以在每个组件 内使用。
嵌套路由
实际项目中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各 层组件，例如
借助 vue-router ，使用嵌套路由 children 配置，就可以很简单地表达这种关系。要注意，以 / 开头的嵌套路径会 被当作根路径。 子路由不以 / 开头，则会从父级目录开始
声明式导航 编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实 现。
router.push(location, onComplete?, onAbort?)
在 Vue 实例内部，你可以通过 $router 访问路由实例，想要导航到不同的 URL，则使用 router.push 方法，这个 方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...) 。
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当 前路由对象
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉 当前的 history 记录
声明式导航 编程式导航
<router-link :to="..." replace> router.replace(...)
命名视图
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 nav (导航)， header (头部) 和 aside (内容) 三个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独 的出口。如果 router-view 没有设置名字，那么默认为 default
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：
