provide、inject
最外层组件(祖先组件)向其所有子组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效;通过在App.vue,声明reload方法,控制router-view的显示或隐藏,去控制页面刷新。
App.vue
<template><div id="app"><router-view class="container" v-if="isAlive" /></div></template><script>export default {name: "app",data() {return {isAlive: true};},provide() {return {reload: this.reload};},components: {},created() {},methods: {reload() {this.isAlive = false;this.$nextTick(() => {this.isAlive = true;});}}};</script>
子组件注入reload方法
inject: [“reload”]
在逻辑完成后,直接this.reload(),即可刷新当前页面;
<template><div class="discovery-wrap"></div></template><script>export default {inject: ["reload"],name: "Discovery",components: {},created() {this.$nextTick(() => {let _self = this;let token = this.token ;if (typeof token == "undefined") {setTimeout(function() {_self.reload();}, 2000);}});},data() {return {token: ""};},computed: {},methods: {},mounted() {}};</script>