vue刷新当前页面

我们经常遇到此种情形，当新增编辑完成后，需要重新刷新页面数据，重新调用接口较多时，挨个调用过于繁琐；甚至可能遇到跨组件调用的问题，毫无疑问，处理起来有些许费力，本文就将如何处理这种情况可用方案进行总结：

方案一：整页刷新–不推荐

实现

location.reload() 
this.$router.go(0)

优点

1.代码简单，仅需一行代码即可实现效果；
2.便于理解，相当于重新加载一遍系统；

缺点

相当于按ctrl+F5 强制刷新，整个页面将重新加载，故而加载速度慢，会出现一个瞬间的空白页面，体验感不好。

方案二：路由跳转当前页面–不推荐

实现

1.当前页面增加页面跳转

this.$router.replace({path: this.$route.path,query: {routeKey: new Date().getTime()}
})

2.监听当前页面路由变化

watch: {'$route'(newVal) {if(newVal.query.routeKey) {// 调用需变更的方法}}
}

优点

代码简单；

缺点

1.地址栏会变化，多增加参数；
2.只适用于第二种情况，跨组件；
3.代码不可重复性利用；

方案三：路由跳转–比较推荐

实现

1.当前页面增加页面跳转

this.$router.replace({path: '/centerPage',query: {to:this.$route.path}
})

2.增加中间页面

<template><div class='centerPage'></div>
</template><script>
export default {name: "centerPage",methods: {jump() {let url = this.$route.query.tothis.$router.replace(url)}},created() {this.jump()}
}
</script>

优点

1.不会像方案一样有长时间的白屏；
2.多个需求需要时，可重复使用；

缺点

可以在地址栏看到路由切换的过程；

方案四：provide / inject组合–最为推荐

provide/inject 是 Vue 在 2.2.0 版本新增的 API；
provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

实现

1.修改app.vue

<template><div id="app"><router-view v-if='isRouterAlive'/></div>
</template><script>
export default {name: 'App',components: {},data() {return{isRouterAlive: true // 控制页面显隐}},provide() {return{reload: this.reload}},methods: {reload(){this.isRouterAlive = falsethis.$nextTick(() => {this.isRouterAlive = true})}}
}
</script>

2.当前页面调用

<template><div class='currentPage'></div>
</template><script>
export default {name: "currentPage",inject: ['reload'], // 引用methods: {submit() {this.reload() // 调用}}
}
</script>