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

【问题标题】：How to update properties of component for dynamic router-link in vuejs如何在 vuejs 中更新动态路由器链接的组件属性
【发布时间】：2020-02-27 08:49:57
【问题描述】：

对 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 实例）

我通过 router-link 将回合 # 和游戏 # 作为道具传递。这些在 Matchup.vue 中加载良好。

但是，当我尝试进行异步调用以获取对战数据时，没有任何反应。 matchup 属性永远不会更新，不会在链接点击或永远不会更新。因此，如果我只是尝试使用 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 等。

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

【问题讨论】：

您是否尝试过使用watch 进行道具更改（分别为回合或游戏），您的情况并不完全清楚，但可能是组件在 axios 请求返回您想要的数据之前加载.因此，在created 或任何相关数据可能尚未在道具中时，当它们从父组件到达那里时，什么也没有发生。 Watch 也可以作为调试这类事情的好工具。

标签： vue.js vue-component vue-router

【解决方案1】：

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

【讨论】：