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邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~