Vue 相同路由跳转时通过key 属性强制刷新组件
问题
在使用vue开发spa应用时，常会通过this.$router.push 跳转到其他路由。一般情况下直接写跳转语句就OK 了，但是，当要跳转到的路由和当前路由相同时（例如都是跳转前后路由都是'/postlist/'，但查询参数不同的情况），会出现组件页面不刷新的问题。例如，当前页面是文章列表'/postlist/'，需要跳转到某一分类的文章列表'/postlist/?categories=1'，跳转代码是这样的
this.$router.push({ path: '/postlist/', query: { categories: cid } }).catch(err => err)
但实际上代码执行后，对应的组件本身并没有被刷新。这是vue的默认行为，同样的一个路由，多次push时，页面不会再次刷新和发送请求 。
解决办法
解决办法有很多种，这里只介绍最简单的办法，就是将上面变化的参数绑定到<router-view/> 中key属性。其原理可以参考Vue 官方文档 https://cn.vuejs.org/v2/api/#key
key可以用于强制替换元素/组件而不是重复使用它。
当key 属性变化时，组件会被强制刷新。
因此，对上面的例子中的情况，可以将query 的categories 参数绑定到<router-view/> 中key属性上，例如：
<router-view :key="$route.path + $route.query.categories"></router-view>
这样修改之后，this.$router.push时，只要query 的categories参数发生变化，对应的<router-view/> 组件就会被刷新了。
冀公网安备 13010402001886号