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

Question

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

我有一个视图组件，Bracket.vue，现在，我想要这个视图做的只是提供指向锦标赛中不同比赛的链接。

我已经很好地动态地完成了这项工作，如下所示：

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

单击链接时，我会拉出另一个视图组件 Matchup.vue，我想在其中显示有关比赛的某些数据。 （MatchupService 是一个 axios API 实例）

我通过路由器链接将回合#和游戏#作为道具传递。 这些在 Matchup.vue 中加载良好。

但是，当我尝试进行异步调用以获取比赛数据时，什么也没有发生。 matchup属性永远不会更新，不会在链接点击时或永远不会更新。 所以我要么一无所获（当我使用下面的三元组时），要么如果我只是尝试使用matchup值则会出错

比赛.vue

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

我对此尝试了许多不同的方法：更新与创建与其他挂钩，我尝试在加载后更新属性并将其挂钩到 v-if 等。

我只是对此完全受阻，所以希望得到一些帮助。

Answer 1

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

更多关于你可以在这里找到：

https://router.vuejs.org/guide/advanced/navigation-guards.html