Vue项目中微信浏览器页面刷新问题
运行在微信浏览器中的Vue项目,当需要用户主动对页面进行刷新时,会遇到如下问题:微信不支持location.reload()方法,在微信浏览器中会失效Vue中的路由跳转是类似于ajax局部刷新,因此使用location.href=‘xxx+时间戳’ 这种方法时,页面不会重载Vue自带的this.$router.go(0)无效history.go(0)无效通过后来的研究和学习,找到了一...
·
运行在微信浏览器中的Vue项目,当需要用户主动对页面进行刷新时,会遇到如下问题:
- 微信不支持location.reload()方法,在微信浏览器中会失效
- Vue中的路由跳转是类似于ajax局部刷新,因此使用location.href=‘xxx+时间戳’ 这种方法时,页面不会重载
- Vue自带的this.$router.go(0)无效
- history.go(0)无效
通过后来的研究和学习,找到了一种解决办法,简单来说就是控制app.vue下的路由视图<router-view\>的显隐来控制页面的更新
那么问题是<router-view\>所在的位置是父组件App.vue文件里,而需要刷新的页面是一个子文件,子文件应该如何控制父组件中的<router-view\>的显隐呢
provide/injct
provide
用于在某一父组件向其所有子孙组件中注入依赖,其所有子孙(只要有上下级关系,不管层次多深)都可以调用
inject
用于在子组件中调用其某一父组件中provide中的值
具体用法
在App.vue中,先在provide中注册一个用于页面重载的方法
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</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这个方法就可以了
inject: ['reload'],
data(){
return {...}
},
method:{
removePerson(){
。。。。。。。
this.reload()
。。。。。。。
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)