在路由更改时更新 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 中所做的事情抽象为您可以从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 2

您可能希望像这样向<router-view> 添加一个 :key 属性：

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

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

Answer 3

更新 --- 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() 函数。希望这对你有帮助！祝你好运！

---

以下是我的旧答案。
仅出于“进步”的目的而保存

我对这个问题的解决方案是查看$route 属性。
最终你会得到两个值，即to 和from。

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

Answer 4

是的，我遇到了同样的问题，通过以下方式解决了；

ProductDetails.vue

 data() {
    return {
       ...
       productId: this.$route.params.productId,
       ...
     };
   },
 methods: {
  ...mapActions("products", ["fetchProduct"]),
  ...
 },
created() {
    this.fetchProduct(this.productId);
...
}

fetchProduct 函数来自Vuex 商店。当点击另一个产品时，路由参数由productId 更改，但component 不会重新渲染，因为created 生命周期挂钩在初始化阶段执行。

当我在父组件 app.vue 文件上添加 router-view 上的键时

app.vue

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

现在它对我很有效。希望这对 Vue 开发者有所帮助！

Answer 5

您可以只使用以下代码：

  watch: {
    $route(to, from) {
      // react to route changes...
    }
  }