ajax 请求后刷新 vue-router 视图

Question

我有一个 vue 路由器，有两个组件，一个列表和一个详细视图，link 返回列表视图。在同一页面上，我列出了列表视图组件中显示的相同数据。

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

我如何与路由器视图沟通它应该用新数据重绘？

如果我单击非路由器列表中的一个项目，路由器视图会按预期更改为详细信息组件，如果我随后单击 "show list" 它会变回列表组件，但这次它填充了正确的数据。

我创建了一个包含相关代码的 js-fiddle：https://jsfiddle.net/pengman/jkwvphf9/2/ （通过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>

Javascript代码：

var PlanteListing = {
  template: '#plante-listing-template',

  data: function () {
    return {
      planter: this.$parent.planter
    }
  },
  watch: {
    '$route'(to, from) {
      // vi skal opdatere data, saa vi skal beregne igen 
      this.planter = this.$parent.planter;
    },
    'dataloaded'() {
      this.planter = this.$parent.planter;
    }
  }
};  

var PlanteDetail = {
  template: '#plante-detail-template',
  data: function () {
    var parent = this.$parent;
    var nummerFromRoute = this.$route.params.nummer;
    //console.log(nummerFromRoute);
    var filtered = this.$parent.planter.filter(function (item) {
      return (item.Nummer == nummerFromRoute) ? item : false;
    });

    return {
      plante: filtered[0]
    }
  },
  watch: {
    '$route'(to, from) {
      // vi skal opdatere data, saa vi skal beregne igen 
      var nummerFromRoute = this.$route.params.nummer;

      var filtered = this.$parent.planter.filter(function (item) {
        return (item.Nummer == nummerFromRoute) ? item : false;
      });
      this.plante = filtered[0];
    },
  }
};

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

var app = new Vue({
  router,
  data: {
    planter: []
  },
  components: { PlanteListing: PlanteListing },
  methods: {
    getJson: function () {
      var self = this;
            /* Real code:
      $.getJSON("content/planter.json", function (param) {
        this.planter = param;
      }.bind(this));
      */
      /* Simulation code: */ 
      setTimeout(function(){self.planter = [  {    "Nummer": "0",    "Navn": "Bertha Winters"  },  {    "Nummer": "1",    "Navn": "Jeannie Small"  },  {    "Nummer": "2",    "Navn": "Mckay Joyner"  },  {    "Nummer": "3",    "Navn": "Janelle Banks"  },  {    "Nummer": "4",    "Navn": "Bray Moran"  },  {    "Nummer": "5",    "Navn": "Hooper Schwartz"  }]; console.log('data loaded')}, 500);
    }
  },
  created: function () {
    this.getJson();
  }
}).$mount('#app');

Answer 1

通常您不希望组件超出自身范围以获取数据（就像您对 this.$parent.planter 所做的那样）。相反，您想传递道具。为此，我稍微修改了您的代码。

第一件事是我将您的 vue-router 升级到最新版本。这允许您在路由上使用 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 上将其作为属性提供。

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

这使我们能够清理您的组件路由并添加它们需要的数据作为 props。

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]
    }
  }
};

不需要告诉路由器重绘；因为数据是道具，Vue 会为我们处理这些。

这是您更新后的 fiddle。

ajax 请求后刷新 vue-router 视图

Refreshing vue-router view after ajax request

javascript

ajax

vue-router

vuejs2