同一路由刷新

改变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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值