twelve-heroes/src/menu/AppMenu.vue

<template>
  <div>
    <div class="row">
      <div class="col-12 col-md-8 offset-sm-2 col-lg-6 offset-md-3">
        <h2>Menu</h2>
      </div>
    </div>
    <keep-alive include="menu-login">
      <component
        :is="menuPage"
        @enter-online="enterOnline"
        @enter-game-creation="enterGameCreation"
        @enter-local="enterLocal"
        @back="menuPage = previousPage.pop()"
        @home="
          menuPage = 'menu-login';
          previousPage = [];
        "
        :username="username"
        v-on="$listeners"
      ></component>
    </keep-alive>
  </div>
</template>

<script>
import MenuLogin from './login/MenuLogin';
import MenuOnlineRoom from './online-room/MenuOnlineRoom';
import MenuGameCreation from './game-creation/MenuGameCreation';
export default {
  data() {
    return {
      previousPage: [],
      menuPage: 'menu-login',
      username: ''
    };
  },
  components: {
    MenuLogin,
    MenuOnlineRoom,
    MenuGameCreation
  },
  methods: {
    enterLocal() {
      alert('Not implemented yet, give us time ! :)');
    },
    enterOnline(username) {
      this.previousPage.push(this.menuPage);
      console.log('enter online with username : ' + username);
      this.username = username;
      this.menuPage = 'menu-online-room';
    },
    enterGameCreation() {
      this.previousPage.push(this.menuPage);
      this.menuPage = 'menu-game-creation';
    }
  }
};
</script>

<style scoped></style>