某些情况下,我们需要使页面刷新,或重新执行页面的生命周期,你会如何实现?
this.$router.replace()
vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用
location. reload()
this.$router.go(0)
这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好
跳转到空白页面在跳转回来
//当前页 方法调用
this.$router.replace({path:'空白页'})
//空白页 data中定义或created中定义
this.$router.replace({path:'当前页'})
这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用
provide/inject
provide
提供
inject
注入
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
祖先组件使用provide提供一个对象或函数返还一个对象,不管嵌套的深的子组件都可以
使用inject来接收该对象并使用
思路: app.vue提供一个方法,使router-view容器显示和隐藏(v-if),完成触发页面的生命周期,即实现刷新;子组件接收该方法,适当的时机调用,即可实现刷新
//app.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
provide () {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive:true
}
},
methods: {
reload(){
this.isRouterAlive=false;
this.$nextTick(function(){
this.isRouterAlive=true
})
}
},
}
</script>
//子组件
<template>
<div class="home">
<el-button @click="reload">刷新</el-button>
</div>
</template>
<script>
export default {
inject:['reload'],
data() {
return {
}
},
mounted() {
console.log('mounted');
},
}
</script>