Vue 实现页面刷新, 体验较好
原理: 通过v-if来渲染<router-view>
provide: 选项应该是在一个对象或者返回一个对象的函数。该对象包含可注入其子孙的属性
inject: 一个字符串数组,或者一个对象,对象的key是本地的绑定名
App.vue添加provide属性
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'app',
provide () {
return {
pageReload: this.pageReload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
pageReload () {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
子组件inject引用父组件的属性
export default {
name: 'childTemplate',
inject: ['pageReload'],
methods: {
reloadFun () {
this.pageReload() // 调用
}
}
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。