Vue.js路由传参异常：MathFactsView无法向MFConfig传递operation参数

问题核心 #

你跳转时已传递operation参数，但MFConfig.vue中$route.params.operation始终为undefined，根本原因是路由配置文件中未为mfconfig路由定义operation参数占位符，导致Vue Router无法解析该参数。

解决步骤 #

1. 修正路由配置 #

打开路由配置文件（通常为src/router/index.js），为mfconfig路由的path添加:operation参数占位符，确保name与跳转时一致：

import Vue from 'vue'
import VueRouter from 'vue-router'
import MathFactsView from '../views/MathFactsView.vue'
import MFConfig from '../views/MFConfig.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'mathfacts',
    component: MathFactsView
  },
  {
    path: '/mfconfig/:operation', // 必须添加该参数占位符
    name: 'mfconfig',
    component: MFConfig
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2. 可选：添加输入校验（避免空参数跳转） #

在MathFactsView.vue中给下拉框添加默认禁用选项，并在跳转前校验参数有效性：

<select class="form-control" id="operation-select" v-model="selectedOperation">
  <option value="" disabled>请选择运算类型</option>
  <option value="addition">加法</option>
  <option value="subtraction">减法</option>
  <option value="division">除法</option>
  <option value="multiplication">乘法</option>
</select>

methods: {
  startGame() {
    if (!this.selectedOperation) {
      alert('请先选择运算类型');
      return;
    }
    console.log("Selected operation:", this.selectedOperation);
    this.$router.push({ name: 'mfconfig', params: { operation: this.selectedOperation } });
  }
}

3. 验证参数获取 #

路由配置修正后，MFConfig.vue的created钩子即可正常获取参数，无需修改原有逻辑：

created() {
  this.operation = this.$route.params.operation;
  console.log("Operation in created: ", this.operation);
  this.generateEquation();
  this.timer = setInterval(this.countDown, 1000);
}

问题重现代码 #

MathFactsView.vue #

<template>
  <div class="container">
    <div class="card mx-auto mt-5">
      <div class="card-header">
        <h1 class="text-center">Math Facts</h1>
      </div>
      <div class="card-body">
        <div class="form-group">
          <label for="operation-select">Select operation:</label>
          <select class="form-control" id="operation-select" v-model="selectedOperation">
            <option value="addition">Addition</option>
            <option value="subtraction">Subtraction</option>
            <option value="division">Division</option>
            <option value="multiplication">Multiplication</option>
          </select>
        </div>
        <div class="text-center">
          <p>Select the operation you want to try.</p>
          <p>Once you press play, you will have 60 seconds to answer as many problems as you can either using your own keyboard, or using the on screen number pad.</p>
          <p>When the game ends, you will see your score, plus have the ability to play again with the same operation, or be taken back to the game screen to choose a new operation.</p>
          <button class="btn btn-primary" @click.prevent="startGame">Play</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOperation: ''
    };
  },
  methods: {
    startGame() {
      console.log("Selected operation:", this.selectedOperation);
      this.$router.push({ name: 'mfconfig', params: { operation: this.selectedOperation } });
    }
  }
};
</script>

MFConfig.vue #

<template>
  <div class="container">
    <div class="card mx-auto mt-5">
      <div class="card-header">
        <h1 class="text-center">{{ operation }}</h1>
      </div>
      <div class="card-body">
        <div class="text-center mb-3" v-if="equation !== ''">
          <div>
            <h2>{{ equation }}</h2>
          </div>
        </div>
        <div class="form-group text-center">
          <label for="answer-input">Answer:</label>
          <input
            type="number"
            class="form-control"
            id="answer-input"
            v-model="answer"
            @keydown.enter.prevent="checkAnswer"
            autofocus
          />
          <div class="keypad mt-3">
            <button class="btn btn-light" @click="appendToAnswer('1')">1</button>
            <button class="btn btn-light" @click="appendToAnswer('2')">2</button>
            <button class="btn btn-light" @click="appendToAnswer('3')">3</button>
            <button class="btn btn-light" @click="appendToAnswer('4')">4</button>
            <button class="btn btn-light" @click="appendToAnswer('5')">5</button>
            <button class="btn btn-light" @click="appendToAnswer('6')">6</button>
            <button class="btn btn-light" @click="appendToAnswer('7')">7</button>
            <button class="btn btn-light" @click="appendToAnswer('8')">8</button>
            <button class="btn btn-light" @click="appendToAnswer('9')">9</button>
            <button class="btn btn-light" @click="appendToAnswer('0')">0</button>
            <button class="btn btn-light" @click="clearAnswer">Clear</button>
          </div>
          <button class="btn btn-primary mt-3" @click="checkAnswer">Submit</button>
        </div>
        <div class="text-center">
          <h3>Score: {{ score }}</h3>
        </div>
        <div class="text-center">
          <h3>{{ timeLeft }} seconds left</h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MFConfig",
  data() {
    return {
      operation: "",
      equation: "",
      answer: "",
      timeLeft: 60,
      score: 0,
    };
  },
  methods: {
    appendToAnswer(num) {
      this.answer += num.toString();
    },
    clearAnswer() {
      this.answer = "";
    },
    checkAnswer() {
      const parsedAnswer = parseInt(this.answer);

      if (parsedAnswer === eval(this.equation)) {
        this.score++;
      }

      this.answer = "";
      this.generateEquation();
    },
    generateEquation() {
      this.answer = "";

      let num1;
      let num2;

      switch (this.operation) {
        case "addition":
          num1 = Math.floor(Math.random() * 100) + 1;
          num2 = Math.floor(Math.random() * 100) + 1;
          this.equation = `${num1} + ${num2}`;
          break;
        case "subtraction":
          num1 = Math.floor(Math.random() * 100) + 1;
          num2 = Math.floor(Math.random() * num1) + 1;
          this.equation = `${num1} - ${num2}`;
          break;
        case "multiplication":
          num1 = Math.floor(Math.random() * 100) + 1;
          num2 = Math.floor(Math.random() * 100) + 1;
          this.equation = `${num1} × ${num2}`;
          break;
        case "division":
          num2 = Math.floor(Math.random() * 100) + 1;
          num1 = num2 * Math.floor(Math.random() * 10) + 1;
          this.equation = `${num1} ÷ ${num2}`;
          break;
      }
      console.log(this.operation);
    },
    countDown() {
      if (this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        clearInterval(this.timer);
        this.$router.push({ name: "GameOver", params: { score: this.score } });
      }
    },
  },
  
  created() {
    this.operation = this.$route.params.operation;
    console.log("Operation in mounted: ", this.operation);
    console.log(this.$route)
    this.generateEquation();

    this.timer = setInterval(this.countDown, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

内容的提问来源于stack exchange，提问作者Kindred_Something