Vue页面数据刷新处理(路由$route监听+Vuex处理)
需求如下:如下问卷调查中,每做完一个问卷,相应的新任务数量(红色label)跟个人任务列表都需要少一条数据,假设下面截图一为页面1,截图2为页面2,页面2为页面1的子路由,如:{path:'/page1',component:PageOne,children:[{path:'page2',component:PageTwo}]},当由children路由/page1/page2跳回page1时,当
需求如下:如下问卷调查中,每做完一个问卷,相应的新任务数量(红色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~
更多推荐
所有评论(0)