Question

人。我刚开始使用Vue.js 2而且我正在尝试创建一个功能类似于RGB Challenge游戏的应用程序。我已经更进一步，增加了困难（简单，中等难度和专家），分别在路由器链接/难度/（简单，中等，硬和专家）下。到目前为止，我已经掌握了很多功能。

现在，我想要的是每个路由器下的内容对应于适当的难度（级别）。这简单的意思是，如果我点击，比方说，简单，只应加载和显示五个彩色框（div）。中等难度应该对应于10，难以20和专家对应于25.这是我遇到问题的地方。当页面第一次加载并且我点击，比如，expert，我将有25个框。但是，当我尝试从此切换到任何其他链接/困难时，没有任何变化，我仍然拥有来自专家级别的相同的25个框。相应的盒子（div）数量根本不加载。

以下是相关的代码段。我没有包括样式。

另外，我还没有完全添加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（Instanciation）

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

Answer 1

Vue Router 2中的路由组件始终可以重用。这意味着当您导航到不同的难度时，不会重新创建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();
},

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

1 个答案: