这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战
路由模式
为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于 ——— 改变视图的同时不会向后端发出请求。
路由有两种模式：hash、history，默认会使用hash模式，但是如果url里不想出现丑陋hash值，在new VueRouter的时候配置mode值为history来改变路由模式，本质使用H5的histroy.pushState方法来更改url，不会引起刷新.
history模式，会出现404 的情况，需要后台配置。
因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
路由原理：
hash路由 ====> window.onhashchange监听路径的切换
history路由 ===> window.onpopstate监听路径的切换
路由守卫
在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化
全局路由钩子：
//进入到某个路由组件之前
router.beforeEach((to, from, next) => {
//会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
console.log('beforeEach')
console.log(to,from)
next()
})
//进入到某个路由组件之后
router.afterEach((to, from) => {
//会在任意路由跳转后执行
console.log('afterEach')
})
单个路由钩子：
只有beforeEnter，在进入前执行，to参数就是当前路由
routes: [
{
path: '/foo',
component: Foo,
//当进入到foo路由之前，就会触发
beforeEnter: (to, from, next) => {
// ...
next() //必须要执行next之后，对应的Foo组件才可以正常显示出来
}
}
]
路由组件钩子：
//进入到某个组件之前的拦截，获取不到组件内部的this
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
//离开某个组件之前的拦截，获取到组件内部的this
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
