平常实现页面刷新其实也很方便，直接用location.reload()方法实现刷新，但是这么刷新用户体验感觉很不好，平白无故的页面刷新然后重新加载，如何避免这样一个效果呢
1.带上当前页面路由跳转到一个重定向的页面,重定向页面再跳转回来.
新建一个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}})
}
2.通过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又会跳回原页面.
方法二就没有上述问题,所以个人更推荐方法二
