问题一、微信浏览器中无法使用reload重载文档【VUE框架】
问题分析：
- 微信不支持location.reload()方法，在微信浏览器中会失效
- Vue中的路由跳转是类似于ajax局部刷新，因此使用location.href=‘xxx+时间戳’ 这种方法时，页面不会重载
- Vue自带的this.$router.go(0)无效
- history.go(0)无效
vue框架开发解决：
在App.vue中，先在provide中注册一个用于页面重载的方法
<template>
<div class="app-wrapper">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: 'app',
provide () {
return {
appReload: this.reload // 通过provider来提供变量
}
},
data () {
return {
isRouterAlive: true // 解决微信端页面刷新问题
}
},
methods: {
// 实现重载
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
然后在子组件中通过inject来注入变量,直接调用reload就可以了
<template>
<div>
<button @click="handlerReload">刷新</button>
</div>
</template>
<script>
export default {
inject: ['appReload'], // 通过inject来注入变量
methods: {
handlerReload () {
this.appReload()
}
}
}
</script>
扩展知识：
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。