Vue.jsでルートを切り替えるときにコンテンツを読み込めません。なぜですか？

Question

人。私はVue.js 2を使い始めています。機能的にRGBチャレンジゲームに似たアプリを作成しようとしています。私はさらに一歩一歩を踏み出し、ルータのリンク/難易度（簡単、中、難、専門）の下にある難易度（簡単、中程度、専門）を追加しました。私は今までのところ機能性の多くをうまく持っています。

ここでは、各ルータのコンテンツが適切な難易度（レベル）に対応するようにしたいと考えています。これが単に意味するのは、私が簡単にクリックすると、5つの色付きボックス（divs）だけが読み込まれて表示されるはずだということです。中程度の難易度は10に、20には難しく、25には専門家に対応する必要があります。これは私が問題があるところです。ページが初めて読み込まれ、エキスパートをクリックすると、25個のボックスが表示されます。しかし、これを他のリンク/困難に切り替えようとすると、何も変わらず、私はまだ専門家レベルから同じ25のボックスを持っています。対応するボックス数（divs）は単にロードされません。

以下は、関連するコードスニペットです。私はスタイリングを含まなかった。

また、私はまだGameInfo.vueコンポーネントの機能を完全に追加しているので、無視してください。私はどんな指針にも感謝します。

アプリケーションコンポーネント

<template> 
    <div id="app"> 
    <h1 class="text-center"> 
     <router-link to="/"> 
     The Great<br> 
     <span>RGB</span><br> 
     Guessing Challenge 
     </router-link> 
    </h1> 
    <NavBar></NavBar> 
    <router-view></router-view> 
    <footer class="text-center"> 
     <p>Copyright&copy; 2017 Collins Orlando</p> 
    </footer> 
    </div> 
</template> 

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

export default { 
    name: 'app', 
    components: { 
    NavBar 
    } 
} 
</script> 

ナビゲーションバーコンポーネント

<template> 
    <div class="navbar"> 
     <nav class="text-center"> 
      <ul> 
       <li><router-link to="/difficulty/easy">Easy</router-link></li> 
       <li><router-link to="/difficulty/medium">Medium</router-link></li> 
       <li><router-link to="/difficulty/hard">Hard</router-link></li> 
       <li><router-link to="/difficulty/expert">Expert</router-link></li> 
      </ul> 
     </nav> 
    </div> 
</template> 

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

難易コンポーネント

<template> 
    <div id="difficulty"> 
     <GameInfo :gameData="gameData"></GameInfo> 
     <div class="container"> 
      <div 
       class="colorBox" 
       v-for="bgColor in colorItems.colorsArray" 
       :style="{ background: bgColor}" 
       @click="checkCorrectColor" 
      > 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    import GameInfo from './GameInfo' 

    export default { 
     components: { 
      GameInfo 
     }, 
     data() { 
      return { 
       score: 0, 
       tries: 0, 
       randomColor:() => { 
        let r = Math.floor(Math.random() * 256), 
         g = Math.floor(Math.random() * 256), 
         b = Math.floor(Math.random() * 256), 
         rgb = 'rgb(' + r + ', ' + g + ', ' + b + ')'; 

        return rgb; 
       }, 
       colorItems: {}, 
       guessedColor: '', 
       num: 0, 
       gameData: {} 
      } 
     }, 
     methods: { 
      numberOfColors() { 
       let difficulty = this.$route.params.id; 

       if(difficulty === 'expert') { 
       this.num = 25; 
       } 
       else if(difficulty === 'hard') { 
       this.num = 20; 
       } 
       else if(difficulty === 'medium') { 
       this.num = 10; 
       } else { 
       this.num = 5; 
       } 
       return this.num; 
      }, 
      generateColorsArray() { 
       let colors   = [], 
        colorToGuess = ''; 

       while(colors.length < this.numberOfColors()) { 
       colors.push(this.randomColor()); 
       } 

       this.colorItems.colorsArray = colors; 
       this.colorItems.colorToGuess = colors[Math.floor((Math.random() * colors.length))]; 

       return this.colorItems; 
      }, 
      checkCorrectColor(e) { 
      this.guessedColor = e.target.style.backgroundColor; 
       if(this.guessedColor !== this.coloritems.colorToGuess) { 
        console.log(this.guessedColor); 
        this.tries++; 
       } else { 
        console.log('I am Groot'); 
       } 
      } 
     }, 
     created() { 
      this.generateColorsArray(); 
      this.gameData.score = this.score; 
      this.gameData.tries = this.tries; 
      this.gameData.colors = this.colorItems; 
      console.log(this.gameData) 
     } 
    } 
</script> 

の

index.js（ルート）

import Vue from 'vue' 
import Router from 'vue-router' 
import Home from '@/components/Home' 
import Difficulty from '@/components/Difficulty' 

Vue.use(Router) 

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'Home', 
     component: Home 
    }, 
    { 
     path: '/difficulty/:id', 
     name: 'Difficulty', 
     component: Difficulty 
    } 
    ] 
}) 

main.js（インスタンス化）ヴュールータ2で

Answer 1

// The Vue build version to load with the `import` command 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 
import Vue from 'vue' 
import App from './App' 
import router from './router' 

Vue.config.productionTip = false 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App } 
}) 

ルート成分は、常に可能な限り再利用されます。これは、別の難易度に移動するときにDifficultyコンポーネントが再作成されず、ルートが変更されたときに呼び出されないcreatedフックで初期化を実行することを意味します。

ナビゲーションガードbeforeRouteUpdateを使用すると、新しい難易度でコンポーネントが再初期化されます（必要に応じてコンポーネントの状態がリセットされる可能性があります）。

methods: { 
    reset() { 
    this.generateColorsArray(); 
    this.gameData.score = this.score; 
    this.gameData.tries = this.tries; 
    this.gameData.colors = this.colorItems; 
    console.log(this.gameData) 
    }, 
}, 

created() { 
    this.reset(); 
}, 

beforeRouteUpdate(to, from, next) { 
    // This check may not be necessary depending on your router configuration 
    // and if you have other intermediate route components 
    if (from.params.id !== to.params.id) { 
    this.reset(); 
    } 

    next(); 
},