Обновление компонента VueJs при изменении маршрута

есть ли способ повторно отобразить компонент при изменении маршрута? Я использую vue Router 2.3.0, и я использую тот же компонент в нескольких маршрутах. Он отлично работает в первый раз или если я перехожу к маршруту, который не использует компонент, а затем к тому, который делает. Я прохожу то, что отличается в реквизите, как так

{
  name: 'MainMap',
  path: '/',
  props: {
    dataFile: 'all_resv.csv',
    mapFile: 'contig_us.geo.json',
    mapType: 'us'
  },
  folder: true,
  component: Map
},
{
  name: 'Arizona',
  path: '/arizona',
  props: {
    dataFile: 'az.csv',
    mapFile: 'az.counties.json',
    mapType: 'state'
  },
  folder: true,
  component: Map
}

затем я использую реквизит для загрузки новой карты и новых данных, но карта остается такой же, как при ее первой загрузке. Я не знаю, что происходит. на.

компонент выглядит следующим образом:

data() {
  return {
    loading: true,
    load: ''
  }
},

props: ['dataFile', 'mapFile', 'mapType'],

watch: {
    load: function() {
        this.mounted();
    }
},

mounted() {
  let _this = this;
  let svg = d3.select(this.$el);

  d3.queue()
    .defer(d3.json, `static/data/maps/${this.mapFile}`)
    .defer(d3.csv, `static/data/stations/${this.dataFile}`)
    .await(function(error, map, stations) {
    // Build Map here
  });
}
7
vue-component vue.js vuejs2

2 ответов

во-первых, вы не должны действительно называть mounted() себя. Абстрактные вещи, которые вы делаете в mounted в метод, который вы можете вызвать из mounted. Во-вторых, Vue попытается повторно использовать компоненты, когда сможет, поэтому ваша основная проблема, вероятно, что mounted запускается только один раз. Вместо этого вы можете попробовать использовать updated или beforeUpdate жизненный цикл событие.

const Map = {
  data() {
    return {
      loading: true,
      load: ''
    }
  },
  props: ['dataFile', 'mapFile', 'mapType'],
  methods:{
    drawMap(){
        console.log("do a bunch a d3 stuff")
    }
  },
  updated(){
    console.log('updated')
    this.drawMap()
  },
  mounted() {
    console.log('mounted')
    this.drawMap()
  }
}

здесь пример, не рисуя материал d3, но показывая, как mounted и updated обстреляны, когда вы меняете маршруты. Pop откройте консоль, и вы увидите mounted запускается только один раз.

6

вы можете добавить атрибут :key в <router-view> вот так:

<router-view :key="$route.fullPath"></router-view>

таким образом, маршрутизатор Vue перезагрузит компонент после изменения пути. Без ключа он даже не заметит, что что-то изменилось, потому что используется тот же компонент (в вашем случае компонент карты).

7