需求如下:如下问卷调查中,每做完一个问卷,相应的新任务数量(红色label)跟个人任务列表都需要少一条数据,假设下面截图一为页面1,截图2为页面2,页面2为页面1的子路由,如:{path:'/page1',component:PageOne,children:[{path:'page2',component:PageTwo}]},当由children路由/page1/page2跳回page1时,当用this.$router.push跳转回父级路由时候,会发现数据并没有刷新,因为数据初始化页面在mounted或者beforeMount实现,父组件并不会重新执行该事件

解决:一开始通过window.location.reload()进行刷新处理,但是发现在电脑模拟手机能刷新,在自己的p20PRO华为手机却刷新不了,网上看到其他方法,但是个人从一开始想到的方法是通过watch监听,因此有了以下的解决方法,最终实现通过监听路由$route和控制变量值实现更新

一、存储变量

Vuex  store.js(以下代码中,changeHome监听第一页即首页pageOne是否需要刷新,changeTest则是监听第二页pageTwo列表页是否需要刷新)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
  changeTest:0,//页面是否需要刷新
  changeHome:0//刷新首页
}

const mutations = {
  getChange(state,val){
    state.changeTest = val;
  },
  changeHome(state,val){
    state.changeHome =val;
  }
}

// 创建 store 实例
export default new Vuex.Store({
	state,
    mutations
})

二、pageOne.vue(当子页面返回要进入pageOne时候,路由watch会进行监听,先拿取store中changeHome的值,若已经被子路由设为了1,则重新加载数据);

(path:'/page1')
<template>
   <div>
    <div>this is pageOne</div>
    <button @click="jump()">点击进入子页面pageTwo</button>
     <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
   </div>
</template>
<script>
export default(){
    data(){
        return{}
    },
    watch(){
        $route(){
            //通过路由监听到vuex中存储的变量值,当值为1时候刷新,为默认值0时候不刷新
             let gettype = this.$store.state.changeHome;
               gettype==1?this.getData():return;
        }
    },
    methods(){
    getData(){//从接口拿取数据},
    jump(){
       //此处可设置为0,表示第一次进入,当没有做问卷返回时候并不需要再加载一次
     this.$store.commit("changeHome",0);
     }
    },
    mounted(){
    this.getData();
    //执行过一次通过子路由返回不在执行
    }
}
</script>

三、pageTwo.vue(子路由中将changeHome的值设置为1,告诉父级pageOne是从子路由返回回来的,父组件pageOne要重新初始化数据);

(path:'/page1/page2')
<template>
   <div class="p-contain">
     <div>this is pageTwo</div>
    <button type="button" @click="jump()">我要设置父级的changeHome为1</button>   
   </div>
</template>
<script>
export default(){
    data(){
        return{}
    },
 
    methods(){
       jump(){
         //更改store中changeHome值为1,再跳转会父组件pageOne.vue
           this.$store.commit("changeHome",1); this.$router.push({path:"/page1"})
       }
    },
    mounted(){
    
    }
}
</script>

自己写的demo在page1跟page2都有一个按钮进行模拟更改store中的值,实际中可以通过点击进入页面的入口进行对应的处理~不得不说监听$route用处很大,可以用来实现如面包屑等功能,通过这一例子也涨涨见识,Hope it can help you~

Logo

前往低代码交流专区

更多推荐