[探索Vue2]Vue-router的路由进行“原地”跳转刷新组

问题

---

在相同路径中进行跳转，如果只有查询参数改变的话，是会导致不会触发页面内组件的刷新。

https://www.myblog.com/topic/:id&auther=:name
当URL地址只有查询参数进行了改变，此处参数有2个：:id和:name，当本页面还有另外的同路由链接时，就不会进入新的链接。

解决方案

---

可以通过两种方法避免这个情况:

1. 监听当前路径的$route对象，当该对象改变时，触发数据的更新

watch:{
  $route(){
    this.getData(); //当对象改变，执行操作获取新数据
  }   
}

2. 给视图<router-view>添加key属性，把它的值设置为动态随机数（例如New Date()），这样每次都会刷新视图了。

<router-view :key="new Date()"></router-view>

思维发散

---

在Vue里，会默认的考虑性能，尽量的减少DOM的重新渲染。
key属性在Vue里用的会很多，下面摘录一段官方说明：

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

在Vue的列表渲染里，可以通过给<li>标签绑定:key属性来使列表进行强行重新渲染，这样即使每一项的内容并没有改变也可以触发DOM的重新排列。

最后，是否使用这个属性要综合考虑具体的业务逻辑。