在vue的项目中革新功用你会怎样写?
我之前一向用this.$router.go(0)这个要领用户体验很不好,由于页面会闪烁一下革新
直到我发现了这个要领 provide /inject
不过这个要领貌似有兼容问题,起首要肯定一下你的vue版本,此要领实用vue 2.20+
道理:此要领运用的是v-if来掌握router-view的显现或隐蔽,v-if从false变成true时,vue会从新衬着router-view地区,所以当参数变化时,只需让v-if 从true => false => true,就能够完成页面革新
起首,找到本身的route-view
//App.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'App',
provide() {
return {
reload: this.reload//挪用reload要领
}
},
data() {
return {
isRouterAlive: true//一开始router-view为true
}
},
methods: {
reload() {
this.isRouterAlive = false
//在修正数据以后运用 $nextTick,则能够在回调中猎取更新后的 DOM
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
然后在<route-view>下显现的vue页面中举行以下操纵
export default {
name: 'newproduct',
inject:['reload'],//在export default下面加上这一段
method:{
//挪用App.vue下的this.reload()要领,来转变v-if的状况
clickDiv(){//革新按钮挪用的要领
this.reload()
}
}
就ok了
加油!天天提高一点点!