调用vue路由器时超出了最大调用堆栈大小

Question

这是我的代码，我不想做任何花哨的事情，只是学习路由器的工作原理，但由于某些原因，每当我尝试单击路由器链接元素时，我都会收到这个错误。你知道这是什么原因造成的吗？我知道Vue会在v-for循环调用中抛出一些错误，但我不确定我做错了什么，这对我来说似乎是一个非常标准的调用。

vue.runtime.esm.js?2b0e:1888 RangeError: Maximum call stack size exceeded
at Watcher.get (vue.runtime.esm.js?2b0e:4493)
at new Watcher (vue.runtime.esm.js?2b0e:4468)
at mountComponent (vue.runtime.esm.js?2b0e:4073)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5978)
at createElm (vue.runtime.esm.js?2b0e:5925)
at createChildren (vue.runtime.esm.js?2b0e:6053)
at createElm (vue.runtime.esm.js?2b0e:5954)
at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6477)

​

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <table>
      <tr>
      <th>NAME</th>
      <th>ADDRESS</th>
      <th>PHONE NUMBER</th>
      <th>CONDITIONAL</th>  
      </tr>
      <tbody>
      <tr v-for="player in players" :key="player.id" v-bind:class="{bad: player.flag === false}">
    <router-link :to="{name:'Players', params: {id: player.id}}"><td>{{player.name}}</td></router-link>
    <td>{{player.address}}</td>
    <td>{{player.phone}}</td>
    <td v-if="player.flag === true">yes</td>
    <td v-else>no</td>
  </tr>
      </tbody>
    </table>
    <p><button v-on:click="count += 1">Add One More Click</button></p>
    <p>The button has been clicked {{ count }} times</p>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data: function() {
    return{
    count: 0,
    players: [
        {
          id: 1,
          name: "john",
          address: "111",
          phone: "12123",
          flag: true,
        },
        {
          id: 2,
          name: "jjoe",
          address: "111",
          phone: "12123",
          flag: false,
        },
        {
          id: 3,
          name: "josh",
          address: "111",
          phone: "12123",
          flag: true
        }
      ]
    }
  }
}
</script>

​

Router.js

​

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Players from '../views/Players.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  },
  {
    path: '/player/:id',
    name: "Players",
    component: Players,
    props: true
  }
]

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

export default router

​

players.vue

​

<template>
  <div class="home">
    <Players/>
  </div>
</template>

<script>
// @ is an alias to /src
import Players from '@/components/Players.vue'

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

​

Answer 1

问题出在players.vue组件中，您不能在同一文件中声明它并使用它

这应该是可行的：

<template>
  <div class="home">
   My Awesome Player
  </div>
</template>

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