关于router-view 组件复用不刷新的问题

2,046 阅读1分钟

相信很多人在使用vue-router 的时候,都会遇到这个问题,比如 /name/detail?id=666和 /name/detail?id=888 路由名称相同,只是参数不一样,第二次打开发现页面数据没有刷新,那这个时候怎么办呢,网上有很多方法,

1.在watch() 或者 beforeRouteUpdate 中调用自己更新数据的方法就可以了,不过这种写法的坏处就是,以后每个需要刷新的页面你都要这样写重复的代码,我是不喜欢

2.

在你的 router-view 加一个key值,这个值可以是 $route.path.query.id 这样每次打开页面只要id不同都会刷新组件,这里有一个if的作用是,有些页面我不需要刷新,我就不加key值了。

目前我就试了上面几种方法, 大家可以根据自己的业务需求去选择,看那种哪种合适,当然如果你们有更好的办法,欢迎给我留言哦

gh_6d15274d66b7_258.jpg