几种方式中本人觉得比较OK的一种,简单粗暴上代码,
在app.vue的加上v-if属性
<router-view v-if="isRouterAlive"></router-view>
在data里面加上isRouterAlive,当然这个属性名可以自己定义,默认值为true
data () {
return {
isRouterAlive: true
}
}
methods里面加入一个刷新的方法
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
最后,需要把这个函数 provide 出去
provide () {
return {
reload: this.reload
}
}
这样,app.vue上就设置完了
当我们需要刷新的时候,在需要的页面上加上这个函数就可以了
inject: ['reload']
然后在需要用到这个函数的地方去引用就行了
refresh () {
this.reload()
}
附上完整代码
app.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
<azfoot></azfoot>
</div>
</template>
<script>
import azfoot from '@/components/footer'
export default {
components: {
Azfoot
},
provide () {
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
demo.vue
<template>
<button @click="refresh"></button>
</template>
<script>
export default{
name: 'refresh',
inject: ['reload'],
methods: {
refresh () {
this.reload()
}
}
}
</script>