VUE 刷新当前路由的方法
有一个需求是新增一条数据,成功后刷新该路由并带入新增数据的信息。$router.push()是没有用的,找了很多刷新路由的方法都不满足我需要的效果,所以结合了网上几种方法来实现当前路由刷新。...
·
有一个需求是新增一条数据,成功后刷新该路由并带入新增数据的信息。$router.push()是没有用的,找了很多刷新路由的方法都不满足我需要的效果,所以结合了网上几种方法来实现当前路由刷新。
主要用到有:<router-link> + 监听路由
1、在模板中加入<router-link>标签
<router-link id="routerLink" :to="routerParams"></router-link>
2、在data中定义跳转的参数
data() {
return {
routerParams: {
path:'productInfo',
query: {},
}
}
}
3、监听$route的变化并重新载入数据
watch: {
$route: {
handler(newValue, oldValue) {
this.init()
setTimeout(() => {
// 注意: appMain为容器的ID,这里需要改成自己需要滚动的容器ID
document.getElementById("appMain").scrollTop = 0
},200)
},
deep: true
}
},
4、设置路由参数,主动触发<router-link>的点击事件
// 最后一步,把以下代码粘贴到需要刷新路由的地方
this.$set(this.routerParams, 'query' , { id: '150332000416' })
setTimeout(() => {
let e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("routerLink").dispatchEvent(e);
},50)
至此,一个在当前页面刷新路由的功能就完成了,听懂掌声!!!!!!
更多推荐
已为社区贡献1条内容
所有评论(0)