J'ai un problème de double affichage


#1

Bonjour,

je débute en VusJs, et j’ai un double affichage, je comprends pas vraiment pourquoi voici mon code

i mport Vue from ‘vue’
import Router from ‘vue-router’
import Game from ‘@/components/Game’

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'game',
      component: Game
    }
  ]
})




<template>
  <div id="app">
    <router-view/>
    <Game></Game>
  </div>
</template>

<script>
import Game from './components/Game'

    
export default {
  name: 'App',
  components: {
    Game,
 
  }
}
</script> 

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   
}
</style>





<template>
  <!-- Cette première <div> pour faire pour faire fonctionner le template -->
  <div class="game">
    Espace de jeu
  </div>
</template>

<script>
export default {
  name: 'Game'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Pourriez-vous m’expliquez comment ça fonctionne svp ?


#2

<router-view/> va être remplacé par le composant dans la route active.

Donc quand tu es à ta racine /, <router-view/> devient <Game> d’où le double affichage