vue-router中如何動(dòng)態(tài)的更改一個(gè)組件的顯示隱藏

<div id="app">

<child-com v-if="isChild"></child-com>
<button @click="toggle">切換顯示組件</button>

</div>
<script>

var childCom = {
  template: `<div>
    <h3>頭部</h3>
  </div>`
};
var vm = new Vue({
  el: '#app',
  data() {
    return {
      isChild: false
    }
  },
  components: {
    childCom
  },
  methods: {
    toggle() {
      this.isChild = !this.isChild;
      console.log(this.isChild);
    }
  }
});

</script>

在組件中加上對(duì)應(yīng)的v-if判斷

其實(shí)可以直接用vuex記錄做題狀態(tài)，簡(jiǎn)單分析無非就是看你這道題，如果是做過了點(diǎn)進(jìn)來就是有遮罩，如果沒做過就是無遮罩，你只需要記錄一下是否做過，然后每次運(yùn)行這個(gè)組件前判斷一下就好
關(guān)于運(yùn)用keep-alive，你需要弄明白不同情況調(diào)用這個(gè)組建時(shí)，分別經(jīng)歷了什么過程，提醒你一下你好像沒有說明如果在遮罩情況下用瀏覽器的返回功能返回首頁，再進(jìn)入的時(shí)候是否現(xiàn)實(shí)遮罩

能把代碼分享一下 就更好了