前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue 重新加载页面_页面重新加载

vue 重新加载页面_页面重新加载

作者头像
全栈程序员站长
发布2022-11-03 17:10:21
4.6K0
发布2022-11-03 17:10:21
举报
文章被收录于专栏:全栈程序员必看

Vue刷新页面重新加载

问题描述

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

解决方案

  1. 修改App.vue 在路由视图上添加一个变量isRouterAlive判断显示实现重新加载
代码语言:javascript
复制
<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>
  1. 在需要刷新的页面修改代码 主要是添加inject: ['reload'] 然后在需要刷新的地方调用this.reload() 需要注意的地方是当心死循环。
代码语言:javascript
复制
<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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/181160.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月17日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue刷新页面重新加载
    • 问题描述
      • 解决方案
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档