Vue刷新页面重新加载

最新推荐文章于 2024-06-06 09:55:15 发布

原创最新推荐文章于 2024-06-06 09:55:15 发布 · 6.1k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #刷新 #vue重新加载

存档专栏收录该内容

48 篇文章

订阅专栏

在Vue中，当加载同一路由的页面时，默认不会刷新。要实现页面刷新及重新加载数据，可以在App.vue中修改路由器视图，添加一个isRouterAlive变量控制。通过在需要刷新的组件中注入reload方法并在适当位置调用，可以实现数据的重新加载，但需注意防止死循环。在创建和更新生命周期中，可以通过调用reload方法来获取最新数据。

Vue刷新页面重新加载

问题描述

在加载同一路由页面的时候，vue的页面默认是不刷新的，需要重新加载数据

解决方案

修改App.vue
在路由视图上添加一个变量isRouterAlive判断显示实现重新加载

<template>
  <!-- <router-view/> -->
  <router-view v-if="isRouterAlive"/>
</template>

<script>
/*
这个脚本主要是用来刷新页面的
*/
	export default {
	  name: 'App',
	  provide (){
	     return {
	       reload:this.reload
	     }
	  },
	  data(){
	    return {
	       isRouterAlive:true
	    }
	  },
	  methods:{
	    reload (){
	       this.isRouterAlive = false
	       this.$nextTick(function(){
	          this.isRouterAlive = true
	       })
	    }
	  },
	  components:{
	  }
	}
</script>

在需要刷新的页面修改代码

主要是添加inject: ['reload'] 然后在需要刷新的地方调用this.reload() 需要注意的地方是当心死循环。

<script>
import request from "@/utils/request.js";

export default {
    name:'RightPane',
    inject: ['reload'],
    data(){
        return {
            newest_datas: {},
        };
    },
    methods:{
         // 显示明细
        showDetail(val){
            
            //this.$router.push 传参
            this.$router.push({path:'/showDetail',query:{id:val}});
            this.reload() 
        }
    },
    created(){
        //加载数据，显示最新的10条数据
        request.get('/information?currentPage=1&pageSize=10')
            .then((res) => {
                this.newest_datas = res.data.data.records
                
            }).catch((err) => {
                this.$message({type: "error",message: "加载数据出错:"+err, })
        });
    }
}
</script>