改变id来达到刷新路由的目的
使用场景:我是需要做一个点击列表菜单的时候刷新一个组件的数据,但是router他是不会因为改变了一个传过去的数据而重新刷新的,只有改变路径才会刷新,所以使用了一个简答粗暴的方法
<router-view :key="activeDate"></router-view>
在这里加了一个key ,key的值发生变化时候router会重新加载
然后在列表页的点击事件中添加了方法改变key的值
this.activeDate = new Date().getTime()
贴一段别人的留作笔记。
1.在使用Vue-router做项目时,会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的,单纯的改变id号并不会刷新router-view,而这并不是我们所期望的结果。
2.我们可以在点击事件上加上router.go(0),强制刷新整个页面。当然这种体验效果太差,我认为不可取。
3.使用watch的方法,具体的可以看一下官方文档
watch: { 'KaTeX parse error: Expected '}', got 'EOF' at end of input: …, from) { this.store.dispatch(‘updateActiveTemplateId’, this.$route.params.templateId) // 通过更新Vuex中的store的数据,让数据发生变化 this.getTemplateById() } }
作者:Facechat