Vue.js 如何在vuejs中更新动态路由器链路组件的属性

Vue是一个新手，还没有找到任何专门解决我的问题的方法

我有一个使用VueRouter的简单Vue应用程序，我试图生成一个支架式的体育比赛，记录比赛中不同比赛的结果

我需要对服务器进行异步axios调用，以获取特定游戏的信息。我不知道如何正确更新我的组件以获取此信息

App.vue非常简单。主页只是对括号的概述

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'bracket'}">Bracket</router-link>
    </div>
    <router-view />
  </div>
</template>

我在这方面尝试了许多不同的方法：更新的与创建的与其他钩子，我尝试了更新属性post load并将其钩子到v-if，等等

---

我在这方面遇到了困难，希望能得到一些帮助。

看起来您需要在router.js文件中输入之前使用导航钩子

，或者您可以在component文件中直接使用
beforeRouteEnter
钩子。（注意！在组件文件中使用beforeRouteEnter您无法访问“this”，因此，如果您想在应用程序中存储一些数据，可能有理由使用Vuex）。在那里，您可以在将用户重定向到特定页面之前定义/获取/设置任何数据。通过这种方式，您可以执行任何想要的操作，并在重定向之前进行设置

更多关于您的信息，请参见：

您是否尝试过使用
watch
更改道具（分别为回合或游戏），您的情况并不完全清楚，但可能是在axios请求返回所需数据之前加载了组件。同样地，在创建
时，或者在道具中可能还没有相关数据的任何时候，当它们从父组件到达时，什么都不会发生。手表也可以作为调试这类事情的好工具。
<template>
  <div class="home">
    <div id="nav">
      <div v-for="round in rounds" :key="round">
        <router-link v-for="game in gamesPerRound" :key="matchupKey(round, game)" :to="{ name: 'matchup', params: {round: round, game: game} }">Matchup {{ round }} {{ game }}</router-link>
      </div>
    </div>
  </div>
</template>

<template>
      <div class="matchup">
        <h1>Round {{ round }}</h1>
        <h2>Game {{ game }}</h2>
        <h6>Team 1: {{matchup.teams ? matchup.teams[0]: 0}}</h6>
        <h6>Team 2: {{matchup.teams ? matchup.teams[1] : 0}}</h6>
      </div>
    </template>

    <script>
    import MatchupService from '@/services/MatchupService.js'

    export default {
      props: ["round", "game"],
      data() {
        return {
          matchup: {},
        }
      },
      async updated() {
          let matchups = await MatchupService.getMatchups()
          this.matchup = matchups.data.rounds[this.round].games[this.game]
      },
    }
    </script>