直接开始:
在你所要刷新的 中改写:
<template>
<router-view v-if="isRouterAlive"/>
</template>
<script>
export default {
data () {
return {
isRouterAlive: true
}
},
provide() {
return {
reload: this.reload; //this.reload方法注入 到reload参数中,从子组件获取
}
},
methods: {
reload () {
this.isRouterAlive = false;
this.$nextTick(() => (this.isRouterAlive = true));
}
}
}
</script>
子组件:
{
inject: ['reload'] //获取组件传递过来的reload方法
}
methods:{
goOnReload() {
this.reload(); //重新加载页面
},
}
本文详细介绍了如何在Vue.js中实现路由组件的刷新,通过在父组件中使用布尔值控制和$nextTick方法,结合子组件中注入的reload方法,实现了路由视图的动态更新,避免了页面的硬刷新。

3787

被折叠的 条评论
为什么被折叠?



