Vue刷新页面重新加载

Posted 2022-12-11 没刮胡子

Vue刷新页面重新加载

问题描述

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

解决方案

1. 修改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>

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

   主要是添加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>