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

Answer 1

您可能希望将{key}属性添加到<router-view>，如下所示：

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

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

Answer 2

此问题的替代解决方案可在更多情况下处理此情况。

首先，你不应该亲自打电话给mounted()。将您在mounted中执行的操作抽象为可以从mounted调用的方法。其次，Vue会尝试在可能的情况下重新使用组件，因此您的主要问题可能是mounted只被触发一次。相反，您可以尝试使用updated或beforeUpdate lifecycle事件。

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()
  }
}

这是一个little example，不是绘制d3的东西，而是显示交换路由时如何触发mounted和updated。弹出控制台，您将看到mounted只被触发一次。

Answer 3

我对这个问题的解决方案是观看$route属性。
最终您将获得两个值，即to和from。

watch: {
  '$route'(to, from) {
    const id = to.params.id
    this.AJAXRequest(id)
  }
},

路线更改时更新VueJs组件

3 个答案: