在更改路线时更新VueJs组件

vue.js Vue.js

乐米亚

2020-03-16

有没有一种方法可以在路线更改时重新呈现组件?我正在使用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
  });
}

第1668篇《在更改路线时更新VueJs组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
泡芙十三 2020.03.16

您可能需要添加:key属性,<router-view>例如:

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

这样,一旦路径更改,Vue路由器将重新加载组件。没有密钥,它甚至不会注意到由于使用了相同的组件(在您的情况下为Map组件)而发生了更改。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android