最近做用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() 这个函数是专门用来刷新组件的(更新于2018/11/02 :这个只能更新当前组件本身和slot子组件),可以理解为重置vm本身的状态,让程序重新走一遍生命周期
  • 2.vm.watch是监听某个data、computed里面的属性,当出现变动的时候执行对应的回调
  • 3.mixins 是一种用来给VUE组件混入配置的API,如果原来组件已经存在对应的同名配置,会会执行2个同名配置里面的程序
  • 4.vuex一个状态管理的vue工具,设计多个同级子组件数据通讯的时候常用

 

程序流程:

  1. 在vuex里面加一个state
  2. 在程序根组件的【文件】里面加一个JSON配置Config,
  3. Config的computed加一个变量A,让A依赖vuex的state,
  4. 同时Config加watch,watch变量A,如果A发生变动就执行watch对应的函数this.$forceUpdate()[注意不要用箭头函数]
  5. 通过给根组件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 })
        })
      }

 

Logo

前往低代码交流专区

更多推荐