Vue页面数据刷新处理（路由$route监听+Vuex处理）

最新推荐文章于 2024-09-06 17:54:01 发布

原创最新推荐文章于 2024-09-06 17:54:01 发布 · 7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Vue刷新 #Vuex #$route

Vue 同时被 3 个专栏收录

17 篇文章

订阅专栏

Vuex

3 篇文章

订阅专栏

Vue-router

1 篇文章

订阅专栏

本文介绍如何在Vue项目中利用路由监听和Vuex状态管理，实现子路由返回父路由时的数据刷新。通过监听$route变化并结合Vuex存储变量，确保页面数据在路由切换后能够正确更新。

需求如下：如下问卷调查中，每做完一个问卷，相应的新任务数量（红色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~