在路由更改时更新 VueJs 组件

Question

有没有办法在路由更改时重新渲染组件？我正在使用 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
  });
}

原文由 user1627827 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题的替代解决方案在更多情况下处理这种情况。

首先，你不应该真的打电话给 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 在交换路由时如何被触发。打开控制台，你会看到 mounted 只被触发过一次。

原文由 Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可能希望向 <router-view> 添加一个 :key 属性，如下所示：

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

这样，一旦路径发生变化，Vue Router 就会重新加载组件。如果没有密钥，它甚至不会注意到某些内容发生了变化，因为正在使用相同的组件（在您的情况下是 Map 组件）。

原文由 Matthias Hagemann 发布，翻译遵循 CC BY-SA 3.0 许可协议