0

描述

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

代码结构如下:

question页,我把遮罩划分为两个组件:背景遮罩(modal)+得分榜(doneModal))。

流程

点击开始答题按钮 -> 进入question答题页面,答题完成后 -> 显示背景遮罩(modal)+得分榜(doneModal),点击查看排行榜 ->进行score

遇见的问题

当我从score返回的时候,question的得分板遮罩就消失了,现在需要实现的是,当从score返回的时候,遮罩不消失,question保持进入score之前的得分状态。然后点击得分板的再来一次按钮,就回到home,开始重新答题。该如何去保存弹出得分板的那个状态呢,从score返回的时候保持,从home进入的时候重置。

尝试

  • 在根组件中使用了keep-alive,但是回答问题完成后,重新开始答题,得分板的状态还是保持着。

请大神提供下解决思路,才玩vue,还是萌新 :)

2个回答

1

已采纳

其实可以直接用vuex记录做题状态,简单分析无非就是看你这道题,如果是做过了点进来就是有遮罩,如果没做过就是无遮罩,你只需要记录一下是否做过,然后每次运行这个组件前判断一下就好
关于运用keep-alive,你需要弄明白不同情况调用这个组建时,分别经历了什么过程,提醒你一下你好像没有说明如果在遮罩情况下用浏览器的返回功能返回首页,再进入的时候是否现实遮罩

0

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

在组件中加上对应的v-if判断

撰写答案