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

vue 重新加载页面_页面重新加载Vue刷新页面重新加载问题描述在加载同一路由页面的时候,vue的页面默认是不刷新的,需要重新加载数据解决方案修改App.vue在路由视图上添加一个变量isRouterAlive判断显示实现重新加载<template><!–<router-view/>–><router-viewv-if=”isRouterAlive”/></template><script>/*这个脚本主要是用来刷新页面的

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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>

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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(2)


相关推荐

  • “狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作

    “狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作一、垃圾文字生成器介绍最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。他的文风可能是这样的:你发现,…

  • 大数的阶乘算法

    大数的阶乘算法用data数组来存放阶乘的每一位数字,首先令第一位的数值为1,位数为1,然后将每次相乘的乘积存回数组,并循环处理每个数组中超过10的数,若数值超过10,则需要进位,将位数加1,原来的数除以10,商数加前一位数的数值后存回前一位数的数组中,再将余数存回原来位数的数组中。例如求5!的值步骤一:1!=1位数1数组内容0     0     0     1步骤二:2!=2

  • jax-ws java_通过JAX-WS实现WebService

    jax-ws java_通过JAX-WS实现WebService(一)服务端的创建一,首先创建一个Web项目,或者创建一个WebService项目也行(差别就是后者在开始就设置了WebService的调用方式)二,在项目中创建一个类作为我们要发布的服务(需要是非静态的public方法,我这里的main方法就是一个尝试)三,把这个项目转成一个WebService项目(开始就创建的WebService项目也要走这步),在划红线部分选择NewWebSe…

  • idea2021.5永久激活码(最新序列号破解)

    idea2021.5永久激活码(最新序列号破解),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 解散Docker Image为Dockerfile

    解散Docker Image为Dockerfile

  • Pytest(8)parametrize参数化[通俗易懂]

    Pytest(8)parametrize参数化[通俗易懂]前言当某个接口中的一个字段,里面规定的范围为1-5,你5个数字都要单独写一条测试用例,就太麻烦了,这个时候可以使用pytest.mark.parametrize装饰器可以实现测试用例参数化。官方示

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号