一般刷新页面可以用location.reload(true),history.go(0) 等方法,但是这对vue项目很不友好,会是页面重新加载,出现暂时性的空白,而且耗费性能,所以vue项目最好不用这些方法.vue有this.$forceUpdate()可以强制更新,下面介绍其他2种更好的方法.
方法一:带上当前页面路由跳转到一个重定向的页面,重定向页面再跳转回来.
新建refresh.vue
-
<script>
-
export default {
-
name: "refresh",
-
beforeCreate(){
-
this.$router.push(this.$route.query.path)
-
},
-
};
-
</script>
router.js配置一个refresh路由
-
import refresh from './components/refresh.vue'
-
-
-
{
-
path: '/refresh',
-
name: 'refresh',
-
component: refresh
-
},
在要刷新的地方跳转传参即可
-
reflesh(){
-
this.$router.push({path:'/refresh',query:{path:this.$route.fullPath}})
-
},
方法二:通过v-if的功能触发页面刷新,结合provide和inject
修改app.vue,利用v-if可以刷新页面的属性,同时使用provide和inject将祖先节点的数据传递给子代节点
-
<template>
-
<div id="app">
-
<router-view v-if="isShow"></router-view>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'App',
-
provide () {
-
return {
-
reload: this.reload
-
}
-
},
-
data () {
-
return {
-
isShow: true
-
}
-
},
-
methods: {
-
reload () {
-
this.isShow= false
-
this.$nextTick(function () {
-
this.isShow= true
-
})
-
}
-
}
-
}
-
</script>
在要刷新的子路由页面引入inject,然后执行reload事件即可刷新页面
-
export default {
-
name: "demo",
-
inject:['reload'],
-
data() {
-
return {
-
-
}
-
},
-
methods: {
-
reflesh(){
-
this.reload()
-
},
-
}
-
}
对比:
方法一有一个小问题是点击浏览器返回相当于没点击,因为跳转的是refresh页面,尔refresh又会跳回原页面.
方法二就没有上述问题,所以个人更推荐方法二