本文适用于对 Vue.js 和 vue-router 有必定程度了解的开发者
除特殊说明，vue-router 版本为 3.0.2
<router-link> 路由匹配后会给该标签添加 class 属性值 .router-link-active，该功能在嵌套路由中十分方便html
class 的实际属性值能够经过 <router-link> 的 active-class 来控制，全局默认值则经过路由构造选项 linkActiveClass 来控制vue
默认状况下，当前路由的全部父级会默认添加 active-class ，即 当前处于/user/1 会给当前页面的 <router-link to="/"> 添加 active-class ，若是不须要此项，给 <router-link> 添加 exact 便可，精准匹配的 class 经过 exact-active-class 控制webpack
示例：JSFiddlegit
路由配置： {path: '/user-*'} ，访问 /user-admin 路由，可在 $route.params.pathMatch 获取到 'admin' (pathMatch 仅在 vue-router@3.0.2+ 可用，低于此版本使用 $route.params[0] 尝试获取)github
示例：JSFiddleweb
文档：捕获全部路由或 404 Not found 路由正则表达式
路由高级匹配模式vue-router
vue-router 使用 path-to-regexp 做为路由匹配引擎，该库能够经过输入的路径生成匹配规则的正则表达式，从而实现路由匹配功能。编程
path-to-regexp 中经常使用的方法 pathToRegexp(path, keys, options) 第三个参数为 pathToRegexpOptions 编译正则的选项，在 vue-router@2.6.0+ 版本能够经过配置 route 的 pathToRegexpOptions 参数添加高级配选项。segmentfault
参考例子，其可经过 '/optional-params/:foo?' 实现可选 param ，也可经过 '/params-with-regex/:id(\\d+)' 实现仅匹配数字 param（非命中路由向后匹配）。
pathToRegexpOptions 的内容为：
源码：vue-router/src/create-route-map.js:154
文档：高级匹配模式
在 vue-router@2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调做为第二个和第三个参数。这些回调将会在导航成功完成 (在全部的异步钩子被解析以后) 或终止 (导航到相同的路由、或在当前导航完成以前导航到另外一个不一样的路由) 的时候进行相应的调用。
该功能可用在少数埋点场景，而不用配置复杂的路由钩子。
给 route 配置 redirect 属性可以使路由重定向到指定路由，该属性支持 String/Object/Function 三种类型的值，其中 Function 的参数为 to 对象
给重定向的中间路由添加 beforeEach 和 beforeLeave 不会有效果，给 router 添加的钩子也不能检测到这次重定向，若是须要判断重定向来源，可以使用路由对象 $route.redirectedFrom 判断
该功能适合路由 path 修改后保留原路由的重定向
文档：重定向
在平级展现多个视图时（单个视图使用多个平级的<router-view>），能够用到 <router-view> 的 name prop
例如在 sidebar/list 的布局页面上，不用在父级视图容器去书写许多子组件的逻辑，只须要在路由配置中配置好相关页面组件，从而进行组件关系解耦，也能高效控制子视图渲染
例子：JSFiddle
文档：嵌套命名视图
给 route 配置 alias 属性可使访问者保持原有 url 却访问到指定路由中去。
该属性支持 String 和 Array 两种类型，当 alias 与其余路由重复时，以先申明的路由为准，同时别名不会进行路由 class 匹配
文档：别名
该功能旨在给组件与路由解除耦合关系，给 route 配置 props: true 同时组件内 props 配置与 prams 相同的变量，能够直接经过访问 props 而不用经过 $route.params 去访问参数
若是 props 是一个对象，对象内容会看成静态内容传入组件做为 props
当 props 为一个函数，函数接收一个 route 参数，可使 query 做为 props 传入组件或实现更多高级功能
文档：路由组件传参
完整的导航解析流程
文档：完整的导航解析流程
建立 Router 实例，能够提供一个 scrollBehavior 方法，该方法接收 to 、from 、savedPosition（该页面原存在的xy值，仅在经过浏览器前进后退中可用）
在该方法中返回 {selector:to.hash} 还可实现相似于“滚动到锚点”的行为，vue-router@2.6.0+ 还可返回 {offset?:{x,y}} 进行位置偏移，注意该偏移负值为向负方向偏移
其 异步滚动 一般用于小众的过渡组件（transition）和滚动行为同时进行的状况下，官方实例未给太多相关信息
文档：滚动行为
组件懒加载-按组分块
SPA（single page application）因为 All in JS 的特性，会使得首屏加载比较慢，不少人都推荐使用 Webpack 的 代码分割功能减少单个 JS 体积，当全部页面组件使用动态加载则会使页面请求过多而得不偿失，因此组件按组分块则应运而生：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
该功能须要 webpack@2.4+ 支持
文档：把组件按组分块
router.getMatchedComponents(location?)
该函数能够获取传入参数在路由表中匹配的路由对象数组，官方文档中写到一般在服务端渲染数据预加载的时候，也可用于在获取当前路由对象数组的时候
若是须要获取当前路由记录（就是路由构造选项 routes 配置数组中的对象副本，包含children 数组），可用 route.matched
router.resolve(location, current?, append?)
该函数可同时导出一个相似浏览器的 location 对象和一个根据匹配到的路由记录 resolved ，若是没有匹配到对应的对象，resolved 字段默认返回 404 组件或错误数据
router.addRoutes(routes:Array<RouteConfig>)
该函数能够用户触发添加路由到路由表中，能够尝试在用户权限控制中使用
v-on:click 事件，多使用 <router-link> 标签。Router 构建选项 中的 base 值，这样能避免一些没必要要的问题$route 的内容，这个属性是只读，里面的属性是 immutable 状态，但你能够 watch 这个第一次在 segmentfault 上发文章，欢迎各位评论区中吐槽指正