vue路由组件强制刷新&&缓存更新
最近做用vue做后端管理页面的时候遇到一个问题:需要刷新子路由的页面背景:传统嵌套iframe的页面实现实现特别简单,只需要给替换iframe的链接就可以了vue可以考虑通过更新:key来触发更新(适用所有组件)`key的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes`<router-view :key=...
最近做用vue做后端管理页面的时候遇到一个问题:需要刷新子路由的页面
背景:
传统嵌套iframe的页面实现实现特别简单,只需要给替换iframe的链接就可以了
vue可以考虑通过更新:key来触发更新(适用所有组件)
`key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes`
<router-view :key=“$store.app.state.upDate”></router-view>
添加一个key,因为涉及跨组件操作,所以可以通过vuex来管理它
一般情况下,这样处理可以解决这个需求。
暂时这里称为方法①
方法③:this.$router.push
下面展示另外一种方法(方法②)会比较复杂,它会使用到的API有:
- 1.vm.$forceUpdate()
- 2.vm.watch
- 3.mixins
- 4.vuex
详细:
- 1.vm.$forceUpdate() 这个函数是专门用
来刷新组件的(更新于2018/11/02 :这个只能更新当前组件本身和slot子组件),可以理解为重置vm本身的状态,让程序重新走一遍生命周期 - 2.vm.watch是监听某个data、computed里面的属性,当出现变动的时候执行对应的回调
- 3.mixins 是一种用来给VUE组件混入配置的API,如果原来组件已经存在对应的同名配置,会会执行2个同名配置里面的程序
- 4.vuex一个状态管理的vue工具,设计多个同级子组件数据通讯的时候常用
程序流程:
- 在vuex里面加一个state
- 在程序根组件的【文件】里面加一个JSON配置Config,
- Config的computed加一个变量A,让A依赖vuex的state,
- 同时Config加watch,watch变量A,如果A发生变动就执行watch对应的函数this.$forceUpdate()[注意不要用箭头函数]
- 通过给根组件mixins,这样就可以给每个组件添加监听和刷新
警告:`也可以全局注册混入对象。注意使用! 一旦使用全局混入对象,将会影响到 所有 之后创建的 Vue 实例`
官网:https://cn.vuejs.org/v2/guide/mixins.html#%E5%85%A8%E5%B1%80%E6%B7%B7%E5%85%A5
注意:如果你的路由是用keep-live包裹的话,这个方法将会无效,例如:
<keep-alive >router-view ></router-view></keep-alive>
keep-alive是个特殊的标签,你设置了key并不会刷新里面的内容,涉及动态更新keep-alive可以了解下官网
如果你遇到这种情况,可以尝试另外一种方法。它是一种暴力、带有副作用、很取巧的一种处理方式(方法③)
通过最添加自定义query或减少之定义query来刷新!
如果你的页面状态都用vuex来控制的话,使用这个方法特别方便并且不会出现页面闪动的情况
if(this.$route.query.keepalivekeepalive){
let tmp=Object.assign({},this.$route,{query:{}});
this.$router.push(tmp);
}
else{
let tmp=Object.assign({},this.$route,{query:{"keepalivekeepalive":true}});
this.$router.push(tmp);
}
更新(18/07/25)
如果使用了keepAlive的话,不得不说下keepAlive的include(动态管理缓存内容)属性,用法大概如下:
<!-- 一个include解决了,不需要多写一个标签,也不需要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
<router-view></router-view>
</keeo-alive>
vue 2.1.0之后你可以这样使用include可以是个数组,如果你的router-view里面切换的单页面组件没有写name它将会无效。
更新(19/05/04)
方法③最简单时候不考虑keeplive,这种操作方式之前就应该知道有这回事,但是不确定为什么没有加上去,
// tabs, 刷新当前
tabsRefreshCurrentHandle () {
var tab = this.$route
this.removeTabHandle(tab.name)
this.$nextTick(() => {
this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
})
}
更多推荐
所有评论(0)