路由仅仅改变传参无法触发页面数据刷新

问题描述

当你用router-view渲染页面时，大型项目难免用到路由传参，好处就不多说了。
但是，使用过程中会发现，只改变路由传递的参数而没有改变路由其他地址的话，页面是不会重新加载的。
原理是当使用动态路由匹配传递参数时 , 默认会让子路由中的组件页面"复用" , 此时子路由中的页面是不会被销毁的 , 页面的data mounted(){} 等钩子函数不再执行 , 导致路由传递的参数变了 , 但是路由界面不更新 。

解决方案

// 使路由参数更新时页面更新
<router-view :key="$route.path" :doc-id="docId" />

原理就是虚拟DOM的特性。