有没有办法在路线更改时重新渲染组件？我正在使用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'
},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
});
}
解决方法
首先,你不应该自己调用mount().摘要将您正在执行的操作安装到可以从已挂载调用的方法中.其次,Vue会尝试在可能的情况下重新使用组件,因此您的主要问题可能是只安装了一次.相反,您可以尝试使用更新或beforeUpdate
lifecycle事件.
const Map = {
data() {
return {
loading: true,load: ''
}
},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的东西,但显示了在交换路由时如何触发挂载和更新.弹出打开控制台,你会看到mount只被射过一次.
