vue页面刷新_vue强制重置组件

vue页面刷新_vue强制重置组件vue页面刷新首先我们都知道vue属于单页面应用,默认境况下是不会触发刷新页面操作的,所以这个时候就需要我们通过事件来触发reload()来达到刷新操作接下来我就为大家介绍三种刷新页面的方法1.wiindow.location.reload([bForceGet])该方法强迫浏览器刷新当前页面bForceGet可选参数,默认为false,从客户端缓存里取当前true,则以get方式,从服务器端获取最新的页面,相当于页面f5刷新wiindow.location.replace(URL)

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

Jetbrains全系列IDE稳定放心使用

vue页面刷新

首先我们都知道vue属于单页面应用,默认境况下是不会触发刷新页面操作的,所以这个时候就需要我们通过事件来触发reload()来达到刷新操作

接下来我就为大家介绍三种刷新页面的方法

1.

wiindow.location.reload([bForceGet])
该方法强迫浏览器刷新当前页面

bForceGet 可选参数,默认为false,从客户端缓存里取当前

true,则以get方式,从服务器端获取最新的页面,相当于页面f5刷新

wiindow.location.replace(URL)

该URL参数未你所要跳转的地址,如果想实现当前页面刷新,你可以这样做

wiindow.location.replace(location.href)

2.

this.$router.go(0)

经常使用vue的小伙伴看到这个应该很熟悉吧,我们经常用它来实现前进后退,但别忘了它还可以实现自身页面刷新

3.

对于以上两种方法,虽然都可以实现页面刷新,但页面会刷的白一下,给用户的体验非常不好

3.

利用provide/inject组合方式是我目前觉得最好用的方法,下面我们就来详细介绍其用法

首先在我们的app.vue页面中设置

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>    
  </div>
</template>

<script>

export default {
  provide(){
    return{
      reload:this.reload //提供数据
    }
  },
  data() {
    return {
      isRouterAlive:true,
    }
  },
  methods: {
    reload(){
      this.isRouterAlive=false
      this.$nextTick(()=>{
        this.isRouterAlive=true
        console.log("确实刷新了")
      })
    }
  },
};

</script>

这里我来说明一下,我们的主体思路,我想可以通过视图的显隐来达到我们想要的刷新,所以我们就在这里声明了一个方法,先让视图消失随后又出现,这种方法有什么好处呢,你可以刷新局部页面,也可以刷新全部页面,这完全由你自己来控制

接下来,找到我们想要刷新的页面

<template>
  <div>
      <el-button @click="click_close">刷新</el-button>
  </div>
</template>

<script>
  export default {
    inject:['reload'],
      methods: {
       click_close(){       
        this.reload()
      }
      
    },
    mounted () {
       
    },
  }
</script>

如果我们这样来写的话确实通过点击按钮可以触发刷新操作
在这里插入图片描述

可以看到,当我们点击刷新的时候我们的页面就会触发一次事件,刷新一次,可这并不是我们想要的,我们想要的是当一进入页面,就要触发一次刷新,那干脆我们执行这个事件的函数放在mounted里面好了,话不多说直接开始

<template>
  <div>
      <el-button @click="click_close">刷新</el-button>
  </div>
</template>

<script>
  export default {
    inject:['reload'],
      methods: {
       click_close(){             
      }
      
    },
    mounted () {
       this.reload()
    },
  }
</script>

如果你这么写,你打开页面后你会惊奇的发现,刷新次数无限飙升,还没有两秒,刷新次数已经达到了上万次,你试的想一下,如果你有后台,不断地刷新,向后台发送请求,就这每秒请求的频率,不把你服务器搞崩才怪,那为什么会陷入死循环呢,很简单,你刚加载页面的时候他触发一次刷新,刷新之后是不是又会重新加载一下页面呢,然后再触发,在加载…无穷无尽 那就没有办法解决嘛,有,既然我们找到了原因,那解决的办法也是有的
在这里插入图片描述

解决思路:通过判断来处理第一次刷新后,后续将不再执行,也就是我们第一次执行的时候为true,其余的全为false

在vue-router里找到我们当前页的路由信息,加入meta元标签

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  { 
   
    path: '/',
    name: 'Home',
    component: Home
  },
    { 
   
      path: '/table',
      // name: 'routeName',
      component: () => import('../views/Table.vue'),
      meta:{ 
   
        reload:''
      }
    },
   
]

const router = new VueRouter({ 
   
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

export default router

然后在我们需要刷新的页面这样来写

<template>
  <div>
      <el-button @click="click_close">刷新</el-button>
  </div>
</template>

<script>
  export default {
    inject:['reload'],
      methods: {
       click_close(){    
         if(this.$route.meta.reload.indexOf('one')==-1){
          this.$route.meta.reload='one'
          this.reload()
      }      
      }     
    },
    mounted () {
       this.click_close()
    }
  }
</script>

在这里插入图片描述

ok 这样我们就完美解决了当已进入该页面就会默认刷新一次的需求

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

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

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

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

(0)
blank

相关推荐

  • chrome添加扩展程序无效_vue兼容性问题

    chrome添加扩展程序无效_vue兼容性问题chrome扩展程序中以编程方式插入内容脚本不生效的问题

  • iOS结合导航控制器和标签栏控制器

    iOS结合导航控制器和标签栏控制器

  • 怎么把sql删干净_sql的导入和导出的好处

    怎么把sql删干净_sql的导入和导出的好处程序数据库(PDB)文件保存着调试和项目状态信息,使用这些信息可以对程序的调试配置进行增量链接。在使用/debug生成时,会创建一个PDB文件。可以使用/debug:full或/debug:pdbonly生成应用程序。使用/debug:full生成将产生可调试的代码。使用/debug:pdbonly生成将产生PDB,但是不会产生通知JIT编译器调试信息可用…

  • Linux C语言写的超级简单port扫描器

    Linux C语言写的超级简单port扫描器

    2021年12月15日
  • 二进制和十进制的转换机制是什么?_转化成二进制

    二进制和十进制的转换机制是什么?_转化成二进制一、十进制转换成二进制1.1正整数转二进制要点:除二取余,倒序排列,高位补零。方法:将正的十进制数除以二,得到的商再除以二,依次类推直至商为0或1时为止,然后在旁边标出各步的余数,最后倒着写出来,高位补零。注:计算机内部表示数的字节单位是定长的,如8位,16位,或32位。所以,位数不够时,高位补零。1.2负整数转二进制方法:先将对应的正整数转换成二进制后,对二进制取…

    2022年10月18日
  • 神经网络的反向传播算法推导

    神经网络的反向传播算法推导有了上一篇神经网络的反向传播算法推导—前期知识准备做铺垫,下一步来看看反向传播算法具体的推导过程。一、定义机器学习中常说的两个函数:损失函数(lossfunction):是定义在单个样本上的,算的是一个样本的值和预测值的误差,记为C(Θ);代价函数(costfunction):是定义在整个训练集上的,是所有样本误差的平均,也就是损失函数的平均,记为J(Θ);假设函数:二、神经网络结构图以三层神经网络为例:…

发表回复

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

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