Vuejs 动态路由文档详解踩坑经验总结

文档详解

下面咱们从 Vue Router 官方文档的内容开始讲解

1. 响应路由参数的变化

   在实际开发中常常须要把某种模式匹配到的全部路由，全都映射到同个组件。例如，咱们有一个 User 组件，对于全部 ID 各不相同的用户，都要使用这个组件来渲染。那么，咱们能够在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

如今呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，能够在每一个组件内使用。因而，咱们能够更新 User 的模板，输出当前用户的 ID：

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (若是 URL 中有查询参数)、$route.hash 等等。

2. 捕获全部路由或 404 Not found 路由

   复用组件时，你能够简单地 watch (监测变化) $route 对象来监听路由：

​ 若是想匹配任意路径，咱们可使用通配符（*）

3. 高级匹配模式

vue-router 使用 path-to-regexp 做为路径匹配引擎，因此支持不少高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。

4. 匹配优先级

有时候，同一个路径能够匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。

踩坑加扩展

1. Vue Router 动态路由匹配坑点

   ​ 使用 Vue 的小伙伴们应该都知道在 src 目录下有一个 component 文件，咱们通常都会把可复用的组件丢到这个文件里。在使用的时候经过 import 的形式将其引入，使用 props 的形式对复用组件进行传递参数。

​ 可是有的时候，可能须要整个页面进行复用（或者子页面），这个时候 hash 值通常也会跟着变更。这个时候再去使用上面那种 方式就有点不合适了，因此咱们能够采用动态路由的形式来完成这种需求。一样的也是经过新建一个公共Vue组件，而后使用 component 进行引入。

​ 而后咱们在其余页面中使用编程式的导航，例如 router.push('/dynamic/one') 便可跳转到对应的复用页面中去。在这里也有一个小知识点，咱们在 push('/dynamic/one') 的时候是能够拿到穿过来的动态 hash 值的，而且参数也会被存储到 this.$route.params 中的。

​ 小惊喜

​ 做为一个比较流行的框架，确定在一些细节上处理的比较完善。在对于这种直接拿来复用的页面，也考虑到进一步的性能优化的。因此，当使用路由参数时，例如从 /dynamic/one 导航到 /dynamic/two，原来的组件实例是会被复用的。由于两个路由都渲染了同个组件，比起销毁再建立，复用则显得更加高效。不过这也意味着，组件的生命周期钩子函数就不会再被调用。

​ 这个时候 踩坑点 就来了，首先在官方文档中是这么写的。“复用组件时，想对路由参数的变化做出响应的话，你能够简单地watch(监测变化) $route 对象”，这个时候你们都会想着，是否是只要咱们进行路由的切换，在 from 组件中使用 watch 就能够监听到页面发生的变化。可是其实咱们误会了，这里是有一个要求的，必须是子路由进行跳转，才能被监听到。因此咱们去 push 到其余的页面，修改了根 hash 是没法被监听到的。

​ 在动态路由匹配这一章其实还有不少的知识点没讲，也有不少坑做者本人也没去填。好比经常使用的 { path: '*' } 一般用于捕获 客户端 404 错误。

2. 滚动行为

   ​ 有的时候，业务需求须要咱们当页面进行跳转的时候，须要默认定位到某个位置去。其实 Vue Router 已经替咱们解决了这个功能。他就是 scrollBehavior 钩子函数。稍微注意一下：这个功能只在支持 history.pushState 的浏览器中可用。

​ scrollBehavior 方法接受 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航（经过浏览器的 前进/后退 按钮触发）时才可用。

如上图所示，其实还有其余的方式写法：

• { x: number, y:number }

• { selector: string, offset? : { x: number, y: number }}

​ 一样的，有时候咱们想切换路由后过个几秒钟，而后再滚动到指定位置。scrollBehavior 也是支持异步滚动的。写法以下所示：

不少人由于 Vue 是比较容易上手的框架，每每却轻视了它，没有认真的去阅读它的官方文档，其实它也有不少的奇淫巧技能够帮助咱们解决业务上的需求，有时候一个小功能就能够解决大需求。不知道这篇文章有没有对你给予到帮助，若是有帮助记得点下关注哦。

​

PS:你们看了后以为对本身有帮助能够三连留言,欢迎提出宝贵意见，也欢迎各位对相关技术有兴趣的开发者（由团队开发人员微信号x118422邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~