最近学习vue，关于vue-router看了3遍，才开始有了一些自己的理解，而且，对于初学者，我认为
vue-router的官方手册顺序并不适用，所以把自己认为重点的和难以理解的，还有学习顺序进行调整，希望对其他初学者有所帮助，嗯，共同进步~配置路由模式
const router = new VueRouter({//创建路由实例 mode: 'history', routes}) 配置路由模式:
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式.
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
hash模式（默认）
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
history模式
通过history完成 URL 跳转而无须重新加载页面。
因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 就会返回 404，这就不好看了。
注意为了防止404错误，需要写notFound.html页面防止页面找不到发生错误。
const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ]}) 动态路由匹配
当前有路径/foo，当你/foo/XXX，不管XXX是什么，你需要让他都显示某个组件component：A，或者
说路由到某一个页面，就需要使用动态路由配置复制代码查看效果
/user/foo /user/bar /user/aa /user/bb
const User = { template: ` 你的ID是 { { $route.params.id }} `}const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ]})const app = new Vue({ router }).$mount('#app') 嵌套路由
个人觉得和动态路由有点像，/foo下能有两个子路由/foo/a和/foo/b分别跳转A和B页面，这时就可以
使用嵌套路由。编程式的导航
就是说你在代码中可以控制路由，包含几个跳转函数。
router.push(location) history中会有记录
router.replace(location) history中不会有记录
router.go(n) 在history记录中向前跳转几页或者向后几页
// 后退一步记录，等同于 history.back()router.go(-1)// 前进 3 步记录router.go(3)// 如果 history 记录不够用，那就默默地失败呗router.go(-100)
location的值可以有一下几种类型：
'home'
{path:'home'}
{ name: 'user', params: { userId: 123 }} // 命名路由，变成/user/123
{ path: 'register', query: { plan: 'private' }} // 带查询参数，变成 /register?plan=private
命名视图
一个视图叫router-view，通俗的说，就是一个页面可以有多个视图，一个视图对应一个组件。
一个路由，n个视图n个组件，相当于一次路由展示了多个组件。const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ]}) 路由信息对象
一个 route object（路由信息对象） 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。
route object 出现在多个地方:
组件内的 this.$route 和 $route watcher 回调（监测变化处理）;
router.match(location) 的返回值
scrollBehavior 方法的参数
导航钩子的参数：
router.beforeEach((to, from, next) => { // to 和 from 都是 路由信息对象,后面使用路由的钩子函数就容易理解了}) 具体还有其他属性请自行去看官方文档
Router 构造配置
有几个重要的点容易出错
declare type RouteConfig = { path: string; component?: Component; name?: string; // for named routes (命名路由) components?: { [name: string]: Component }; // for named views (命名视图组件) redirect?: string | Location | Function; alias?: string | Array ; children?: Array ; // for nested routes beforeEnter?: (to: Route, from: Route, next: Function) => void; meta?: any;} scrollBehavior
下属代码意思，浏览网页滚动中间位置，下一页，点击浏览器返回键，保持上一页浏览位置，使用
vue-router返回上一页，从浏览器顶部从新开始。scrollBehavior: function (to, from, savedPosition) { return savedPosition || { x: 0, y: 0 } }, savedPosition ：在使用正常浏览器返回前进，遵从浏览器属性，记录浏览位置
{ x: 0, y: 0 }：在使用vue-router路由的页面从顶端开始显示