VUE页面刷新问题
程序员文章站
2022-05-02 12:24:56
1). location方式 2). router方式 3). provide/inject方式 App.vue export default { name: 'App', // 提供reload方法 provide: function () { return { reload: this.relo ......
1). location方式
location.reload() 缺点:刷新页面,卡白
2). router方式
this.$router.go(0) 缺点:同一问题,比一好点
3). provide/inject方式
app.vue <router-view v-if="isrouteralive"></router-view> <script> export default { name: 'app', // 提供reload方法 provide: function () { return { reload: this.reload } }, // isrouteralive控制显示 data: function () { return { isrouteralive: true } }, methods: { // 刷新方法 reload: function () { this.isrouteralive = false; // 该方法会在dom更新后执行 this.$nexttick(function () { this.isrouteralive = true }) } } } </script> home.vue <script> export default { name: 'home', // 注入reload, appvue中注册 inject: ['reload'], methods: { // 退出登陆 logout: function () { // 刷新 // location.reload() // this.$router.go(0) // 刷新当前页面 this.reload(); } } } </script> 缺点:暂时比较不错的解决方案,重点控制`router-view`