Vue刷新当前页面的方法
Vue页面不跳转刷新
·
在做项目的过程中会遇到很多需要重新刷新页面的地方,比如说弹出的登陆框,在登陆成功后要关闭弹窗,并且刷新页面,那么,有哪几种好用的方式来进行页面的刷新呢。
第一种,就是是新建一个空白的页面,跳转到改页面,然后再立马跳转回原页面,但是这个方式很显然不能达到很好的用户体验。
第二种,可以使用跳转路由的方式,给go的参数传0可以实现在本页面跳转本页面,实现刷新。
this.$router.go(0)
第三种,这种是比较方便的一种方法,直接上代码:
在App.vue文件:
这种方法是通过控制router-view的显示与隐藏重新加载实现刷新
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
export default {
name: "App",
provide () {
// 父组件中通过provide来提供变量,在子组件中通过inject来注入。
return {
reload: this.reload
};
},
methods: {
reload () {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
});
}
}
};
在需要用到的组件中注入
export default {
inject: ["reload"],
methods:{
getList(){
//直接使用
this.reload()
}
}
}
这样直接调用就可以实现刷新页面
更多推荐
所有评论(0)