vue 路由参数变化,页面不刷新,provide /inject 完美解决方案
此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true => false => false,就能实现页面刷新;问题描述路由http://localhost:1221/newproduct?entityId=
·
此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true => false => false,就能实现页面刷新;
问题描述
路由
http://localhost:1221/newproduct?entityId=7B311104
点击div时,变为
http://localhost:1221/newproduct
页面不刷新
怎么办……
温馨提示,此方法适用vue 2.20+版本,请先查看你的vue版本
首先,找到自己的route-view
//mainfirem.vue
<template>
<div class="os_container">
<navbar></navbar>
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
import navbar from '@/components/navbar'
export default {
name:'mainframe',
provide(){
return {
reload:this.reload
}
},
data () {
return {
isRouterAlive:true,
}
},
components:{
navbar,
},
methods:{
reload(){
this.isRouterAlive = false
//在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
this.$nextTick(()=>{
this.isRouterAlive = true
})
}
}
}
</script>
<style scoped lang="stylus">
</style>
<route-view>
下显示的页面
//newProduct
export default {
name: 'newproduct',
inject:['reload'],
method:{
//点击div的时候,路由参数改变,
//调用mainfirem.vue下的this.reload()方法,来改变v-if的状态
clickDiv(){
this.reload()
}
}
provide /inject 官网地址
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
end
更多推荐
已为社区贡献13条内容
所有评论(0)