最近做用vue做后端管理页面的时候遇到一个问题：需要刷新子路由的页面
背景：
传统嵌套iframe的页面实现实现特别简单，只需要给替换iframe的链接就可以了
vue可以考虑通过更新:key来触发更新（适用所有组件）
`key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes`
<router-view :key=“$store.app.state.upDate”></router-view>添加一个key,因为涉及跨组件操作，所以可以通过vuex来管理它
扫描二维码关注公众号，回复：
2366269 查看本文章
一般情况下，这样处理可以解决这个需求。
暂时这里称为方法①
下面展示另外一种方法（方法②）会比较复杂，它会使用到的API有:
- 1.vm.$forceUpdate()
- 2.vm.watch
- 3.mixins
- 4.vuex
详细：
- 1.vm.$forceUpdate() 这个函数是专门用来刷新组件的，可以理解为重置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它将会无效。