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

描述

圖片描述

A: home (page)
B: question (page) + time (component) + modal (component) + doneModal (component)
C: score (page)

代碼結(jié)構(gòu)如下：

在question頁(yè),我把遮罩劃分為兩個(gè)組件：背景遮罩（modal）+得分榜（doneModal））。

流程

點(diǎn)擊開(kāi)始答題按鈕 -> 進(jìn)入question答題頁(yè)面，答題完成后 -> 顯示背景遮罩（modal）+得分榜（doneModal）,點(diǎn)擊查看排行榜 ->進(jìn)行score頁(yè)

遇見(jiàn)的問(wèn)題

當(dāng)我從score返回的時(shí)候，question的得分板遮罩就消失了，現(xiàn)在需要實(shí)現(xiàn)的是，當(dāng)從score返回的時(shí)候，遮罩不消失，question保持進(jìn)入score之前的得分狀態(tài)。然后點(diǎn)擊得分板的再來(lái)一次按鈕，就回到home，開(kāi)始重新答題。該如何去保存彈出得分板的那個(gè)狀態(tài)呢，從score返回的時(shí)候保持，從home進(jìn)入的時(shí)候重置。

嘗試

在根組件中使用了keep-alive，但是回答問(wèn)題完成后，重新開(kāi)始答題，得分板的狀態(tài)還是保持著。

請(qǐng)大神提供下解決思路，才玩vue，還是萌新 :）

回答

編輯回答

陌上花

<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判斷

2017年1月21日 14:12

編輯回答

祉小皓

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

2018年8月31日 20:58

編輯回答