Javascript 在Vue.js 2中切换路由时加载内容失败。为什么？

伙计们。我刚刚开始使用Vue.js 2，我正在尝试创建一个功能类似于RGB挑战游戏的应用程序。我更进一步，增加了难度（简单、中等难度和专家），分别位于路由器链接/难度/（简单、中等、难度和专家）下。到目前为止，我的大部分功能都还不错

现在，我希望每个路由器下的内容与相应的难度（级别）相对应。这仅仅意味着，如果我点击easy，那么应该只加载和显示五个彩色框（div）。中等难度对应10，难度对应20，专家对应25。这就是我的问题所在。当页面第一次加载，我点击，比如说，专家，我会有25个框。然而，当我尝试从这个链接切换到任何其他链接/困难时，没有任何变化，我仍然有相同的25个专家级别的框。相应数量的盒子（div）根本不加载

下面是相关的代码片段。我没有包括造型

另外，我还没有完全添加GameInfo.vue组件的功能，所以请忽略它。如果有人给我指点，我将不胜感激

应用程序组件

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

main.js（实例）

//要使用“import”命令加载的Vue生成版本
//（仅限运行时或单机版）已在webpack.base.conf中使用别名设置。
从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
Vue.config.productionTip=false
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
模板：“”，
组件：{App}
})

只要有可能，Vue路由器2中的路由组件总是重复使用。这意味着当您导航到不同的难度时，

难度

组件不会重新创建，并且它会在

创建的

挂钩中执行初始化，该挂钩在路线更改时不会调用

您需要使用导航卫士以新的难度重新初始化组件（如果需要，还可能重置组件的状态）

方法：{
重置（）{
这个。generateColorsArray（）；
this.gameData.score=this.score；
this.gameData.trys=this.trys；
this.gameData.colors=this.colorItems；
console.log（this.gameData）
},
},
创建（）{
这是reset（）；
},
路由更新前（到、从、下一个）{
//根据您的路由器配置，此检查可能不是必需的
//如果有其他中间路线组件
if（from.params.id！==to.params.id）{
这是reset（）；
}
next（）；
},

谢谢你的建议。我会调查的。

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

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
    }
  ]
})

// 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 }
})