关于vue.js:VUE页面局部组件刷新

71次阅读

共计 672 个字符,预计需要花费 2 分钟才能阅读完成。

vue 实现页面刷新

在我的页面里有应用过三种页面刷新的办法,接下来挨个介绍下:

一、以后窗口刷新

window.location.reload() // 页面刷新

二、路由切换形式

this.$router.push("须要刷新的页面地址"); // 页面刷新

以上两种形式都能够有页面刷新的成果,然而毛病就是会呈现空白页,第三种形式就能够解决这一毛病,咱们一起来看看。。。

三、provide / inject 组合形式

首先在你的 App.vue 页面增加 v -if=“isRouterAlive”,如以下代码:

<template>
<div>
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
export default {
name: "app",
data() {
return {isRouterAlive: true,};
},
provide() {
// 提供
return {reload: this.reload,};
},
methods: {reload() {
this.isRouterAlive = false;
this.$nextTick(function () {this.isRouterAlive = true;});
},
},
};

最初在你须要加载的页面注入 App.vue 组件提供(provide)的 reload 依赖,而后间接用 this.reload 来调用就行,如以下代码:

inject: ["reload"], // 注入 和 methods 同级
methods: {onSubmit() {this.reload(); // 部分刷新
}
}

正文完
 0