web-dev-qa-db-ja.com

ルート変更時に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
  });
}
vue.jsvuejs2vue-component
13
user1627827

この質問に対する代替ソリューションは、この状況をより多くの場合処理します。

まず、実際に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が一度だけ起動されることがわかります。

9
Bert

次のように、<router-view>に：key属性を追加することができます。

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

このように、Vueルーターは、パスが変更されるとコンポーネントをリロードします。マップコンポーネント）。

35
Matthias Hagemann

これは古い答えです、最新の答えは以下です

この問題に対する私の解決策は、_$route_プロパティを監視することでした。
2つの値、つまりtoとfromを取得することになります。

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

更新--- 2019年7月3日

原則は上記と同じですが、vue-routerのドキュメントでこれを見つけたことがわかりました。これは In Component Guards と呼ばれています。それの説明によって、それは本当にあなたのニーズに合っています（そして実際に私のものです）。したがって、コードは次のようになります。

_export default () {
  beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused, and this hook will be called when that happens.
    // has access to `this` component instance.

    const id = to.params.id
    this.AJAXRequest(id)
    next()
  },
}
_

ご覧のとおり、next()関数を追加するだけです。これがあなたを助けることを願っています！がんばろう！

4
Irfandy Jip