1.第一种:推荐
这种方法会在浏览器地址栏中多添加#reloaded
mounted() {
if (location.href.indexOf("#reloaded") == -1) {
location.href = location.href + "#reloaded";
location.reload();
}
},
2.下面两种方法都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好
this.$router.go(0)
location.reload()
3.新建一个空白页面,点击确定的时候先跳转到这个空白页,然后再立马跳转回来,这个方法适用于dialog关闭时刷新页面数据
//监听dialog的关闭事件或者确定按钮的点击事件,当事件触发时执行下面代码
this.$router.replace({
path: '/path1', //空白页的路由地址
name: 'name1'
})
在空白页面执行下面的代码:
data(){
this.$router.replace({
path: '/path2', //让路由跳转回当前页面
name: 'name2'
})
return {}
}
这个方式,相比第二种和第三种种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用
4.第五种方法:provide / inject 组合
这个方法需要修改App.vue组件,修改后的代码如下所示:
<template>
<div id="app">
<transition>
<router-view v-if="isRouterAlive" />
</transition>
</div>
</template>
<script>
export default {
name: "App",
provide() {
return {
reload: this.reload
};
},
data() {
return {
isRouterAlive: true
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(function() {
this.isRouterAlive = true;
});
}
}
};
</script>
通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这里定义了isRouterAlive //true or false 来控制
然后在需要刷新的页面中注入App.vue组件提供 reload 依赖,然后直接用this.reload来调用就行,如下所示:
<script>
export default {
inject: ["reload"],
name: "reload",
data() {
return {};
},
methods: {
close() {
this.reload();
}
}
};
</script>
4.第六种方法:利用vue的内置组件keep-alive
巧妙实现进入页面的时候重新获取想要的数据
代码:
<template>
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
//使用Vue组件切换过程钩子activated(keep-alive组件激活时调用),而不是挂载钩子mounted
export default {
// ...
activated: function() {//当页面被激活时触发
this.getCaseDetail()
}
}
</script>