本文适用于对 Vue.js 和 vue-router 有肯定水平相识的开发者

除特别说明，vue-router 版本为 3.0.2

正文

• 路由 class 婚配

  <router-link> 路由婚配后会给该标签增加 class 属性值 .router-link-active，该功用在嵌套路由中非常轻易

  class 的现实属性值能够经由过程 <router-link> 的 active-class 来掌握，全局默许值则经由过程路由组织选项 linkActiveClass 来掌握

  默许情况下，当前路由的一切父级会默许增加 active-class ，即 当前处于/user/1 会给当前页面的 <router-link to="/"> 增加 active-class ，假如不须要此项，给 <router-link> 增加 exact 即可，精准婚配的 class 经由过程 exact-active-class 掌握

  示例：JSFiddle

• 通配符路由

  路由设置： {path: '/user-*'} ，接见 /user-admin 路由，可在 $route.params.pathMatch 猎取到 'admin' (pathMatch 仅在 vue-router@3.0.2+ 可用，低于此版本运用 $route.params[0] 尝试猎取)

  示例：JSFiddle

  文档：捕捉一切路由或 404 Not found 路由

• 路由高等婚配形式

  vue-router 运用 path-to-regexp 作为路由婚配引擎，该库能够经由过程输入的途径天生婚配划定规矩的正则表达式，从而完成路由婚配功用。

  path-to-regexp 中经常使用的要领 pathToRegexp(path, keys, options) 第三个参数为 pathToRegexpOptions 编译正则的选项，在 vue-router@2.6.0+ 版本能够经由过程设置 route 的 pathToRegexpOptions 参数增加高等配选项。

  参考例子，其可经由过程 '/optional-params/:foo?' 完成可选 param ，也可经由过程 '/params-with-regex/:id(\\d+)' 完成仅婚配数字 param（横死中路由向后婚配）。

  pathToRegexpOptions 的内容为：

  • sensitive 大小写敏感 (default: false)
  • strict 末端斜杠是不是准确婚配 (default: false)
  • end 全局婚配 (default: true)
  • start 从最先位置睁开婚配 (default: true)
  • delimiter 指定其他分隔符 (default: ‘/’)
  • endsWith 指定规范的完毕字符
  • whitelist 指定分隔符列表 (default: undefined, any character)

源码：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 传入组件或完成更多高等功用

  文档：路由组件传参

• 完全的导航剖析流程

  1. 导航被触发。
  2. 在失活的组件里挪用脱离守御。
  3. 挪用全局的 beforeEach 守御。
  4. 在重用的组件里挪用 beforeRouteUpdate 守御 (vue-router@2.2+)。
  5. 在路由设置里挪用 beforeEnter。
  6. 剖析异步路由组件。
  7. 在被激活的组件里挪用 beforeRouteEnter。
  8. 挪用全局的 beforeResolve 守御 (vue-router@2.5+)。
  9. 导航被确认。
  10. 挪用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用建立好的实例挪用 beforeRouteEnter 守御中传给 next 的回调函数。

文档：完全的导航剖析流程

• 转动行动

  建立 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

  文档：getMatchedComponents
  文档：$route.matched

• 剖析路由

  router.resolve(location, current?, append?)

  该函数可同时导出一个相似浏览器的 location 对象和一个依据婚配到的路由纪录 resolved ，假如没有婚配到对应的对象，resolved 字段默许返回 404 组件或毛病数据

  文档：router.resolve

• 增加路由

  router.addRoutes(routes:Array<RouteConfig>)

  该函数能够用户触发增加路由到路由表中，能够尝试在用户权限掌握中运用

  文档：router.addRoutes

发起

• 简朴按钮的路由跳转逻辑不运用 v-on:click 事宜，多运用 <router-link> 标签。
• 假如 SPA 安排途径处于域名的子目录中，不要根据一些网络教程写的去修正 webpack 设置，应当修正 Router 构建选项 中的 base 值，如许能防止一些不必要的题目
• 不要尝试转变组件内的 $route 的内容，这个属性是只读，内里的属性是 immutable 状况，但你能够 watch 这个

参考资料

1. url 的正则表达式：path-to-regexp – 简书
2. vue-router Document
3. vue-router Source Code

本文首发地点

blog.shoyuf.top

第一次在 segmentfault 上发文章，迎接列位批评区中吐槽斧正