有没有办法在路径改变时重新渲染组件?我使用的是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
}
然后我使用道具加载新Map和新数据,但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
});
}
6条答案
按热度按时间cgh8pdjw1#
您可能需要将:key属性添加到
<router-view>
,如下所示:这样一来,一旦路径改变,Vue Router就会重新加载组件。如果没有密钥,它甚至不会注意到有什么改变,因为使用的是同一个组件(在您的例子中,是Map组件)。
6yoyoihd2#
更新---2019年7月3日
我在
vue-router
文档中发现了这个东西,它叫做In Component Guard。通过它的描述,它确实适合你的需要(实际上也适合我的需要)。所以代码应该是这样的。正如你所看到的,我只是添加了一个
next()
函数。希望这对你有帮助!祝你好运!以下是我以前的答案
只为“进步”而保存
我对这个问题的解决方案是监视
$route
属性。最后得到两个值,即
to
和from
。bqf10yzr3#
此问题的替代解决方案可在更多情况下处理此情况。
首先,你不应该自己调用
mounted()
。把你在mounted
中做的事情抽象成一个你可以从mounted
调用的方法。其次,Vue会在它可以的时候尝试重用组件,所以你的主要问题可能是mounted
只被触发过一次。相反,你可以尝试使用updated
或beforeUpdate
生命周期事件。这里有一个little example,没有画d3的东西,但是显示了当你交换路由时
mounted
和updated
是如何被触发的。bn31dyow4#
您可以只使用以下代码:
yqkkidmi5#
是的,我遇到了同样的问题,并通过以下方式解决了;
产品详细信息.vue
fetchProduct
函数来自Vuex
存储。当单击另一个产品时,productId
会更改路由参数,但不会重新呈现component
,因为created
生命周期挂钩在初始化阶段执行。当我在
app.vue
父组件文件router-view
上添加just键时应用程序版本
现在它对我来说很好用。希望这能帮助Vue开发人员!
uttx8gqw6#
我也遇到了同样的问题,但略有不同。我只是在道具上添加了一个手表,然后在道具更改时重新启动了获取方法。
路由器-索引.js