Javascript 在ajax请求后刷新vue路由器视图

我有一个vue路由器，它有两个组件，一个列表和一个详细视图，还有一个指向列表视图的链接。在同一页上，我有一个列表，其中包含列表视图组件中显示的相同数据

数据是通过ajax获取的，因此在绘制路由器视图时还没有准备好。但是，当数据准备就绪时，非路由器列表会更新，但路由器视图不会更新

如何与路由器视图通信，使其使用新数据重新绘制

如果我单击非路由器列表中的某个项目，路由器视图将按预期更改为详细信息组件，如果我随后单击“显示列表”，它将更改回列表组件，但这一次它填充了正确的数据

我创建了一个js fiddle，其中包含相关代码： （它通过使用setTimeout伪造ajax，但效果相同）

Html代码：

<div id="app">
Router-view:
  <router-view class="view"></router-view>
  <br>
  Unrouted list: 
  <div class="list-group">
    <router-link v-for="plante in planter" class="list-group-item" :to="{ name: 'plante', params: { nummer: plante.Nummer }}">{{ plante.Navn }} | </router-link>
  </div>
</div>

<template id="plante-listing-template">

        <ul>
            <li v-for="plante in planter">
                {{ plante.Navn }} <router-link :to="{ name: 'plante', params: { nummer: plante.Nummer }}">Vis</router-link>
            </li>
        </ul>
    </template>

    <template id="plante-detail-template">
        <div>
            plante detail template:
            <h3>{{ plante.Navn }}</h3>
            <router-link to="/">Show List</router-link>
        </div>
        <br>
    </template>

---

通常情况下，您不希望让组件自行获取数据（正如您使用

this.$parent.planter

所做的那样）。相反，你想要传递它的道具。为此，我对您的代码做了一些修改

首先，我将您的

vue路由器升级到最新版本。这允许您在路由上使用
props
参数

var router = new VueRouter({
  mode: 'hash',
  base: window.location.href,
  routes: [
    { path: '/', component: PlanteListing },
    { name: 'plante', path: '/:nummer', component: PlanteDetail, props: true }
  ]
});

其次，您在所有路线中都使用了
planter
，因此我在
路由器视图中提供了它作为属性

<router-view class="view" :planter="planter"></router-view>

没有必要告诉路由器重新绘制；因为数据是道具，Vue只为我们处理这些

这是您的最新信息。
谢谢您的回答。它可以工作，但我发现如果我直接链接到页面，它就会失败。如果我链接到一个会导致从一开始就显示详细视图的页面，它将失败，因为plante未定义。我可以通过添加一个v-if来解决这个问题，但是当数据准备就绪时，我该如何更新组件呢？我不知道如何用小提琴来演示这一点，因为它涉及get参数，但如果这不起作用，我可以试试sense@Pengman在数据可用之前，您可以使用导航卫士来阻止路由加载。最后，我在道具上用了一块手表来查看数据是否已被提取
<router-view class="view" :planter="planter"></router-view>

var PlanteListing = {
  template: '#plante-listing-template',
  props:["planter"]
};  

var PlanteDetail = {
  template: '#plante-detail-template',
  props:["planter", "nummer"],
  data: function () {
    var filtered = this.planter.filter(item => item.Nummer == this.nummer);
    return {
      plante: filtered[0]
    }
  }
};