ルート変更時の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 
    }); 
} 

Answer 1

まず、あなたは本当にmounted()自分自身を呼び出すべきではありません。あなたがmountedから呼び出せる方法にあなたが行っていることを抽象化してください。第2に、Vueは可能なときにコンポーネントを再利用しようとします。そのため、主な問題はmountedが1度しか実行されない可能性が高いことです。代わりに、updatedまたはbeforeUpdatelifecycleイベントを使用してみてください。ここで

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が発射されている様子はない、little exampleです。コンソールをポップアップすると、mountedは1度しか実行されません。そのような<router-view>にキー属性：あなたが追加することもでき

Answer 2

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

この方法は、Vueのルーターは、パスの変更後にコンポーネントを再ロードします。キーがなければ、同じコンポーネントが使用されているため（あなたの場合はMapコンポーネント）、何かが変更されたことに気付かないでしょう。