Vue刷新当前页面的3种实现基础指南_刷新教程视频

前些日子项目中突然接到了一个需求,要求点击当前路由刷新页面,进过实验有如下几种方案可实现需求,并简述不同。1. this.$router.go(0)此方式是利用了 history 中前进和后退的功能,传入 0 刷新当前页面。 缺点:页面整个刷新,会白屏。2. location.reload()直接使用刷新当前页面的方法。 缺点:同 this.$router.

Vue刷新当前页面的3种实现基础指南

前些日子项目中突然接到了一个需求,要求点击当前路由刷新页面,进过实验有如下几种方案可实现需求,并简述不同。

Vue刷新当前页面的3种实现基础指南_刷新教程视频

1. this.$router.go(0)

此方式是利用了 history 中前进和后退的功能,传入 0 刷新当前页面。 
缺点:页面整个刷新,会白屏。

2. location.reload()

直接使用刷新当前页面的方法。 

缺点:同 this.$router.go(0) 一样,会白屏。

3. 给 router-view 标签添加 v-if

通过 $nextTick(),协助实现。先把 <router-view /> 移除,移除后再重新添加,达到刷新当前页面的功能。是目前最合适的实现方式。

<span type="button" data-toggle="tooltip" data-placement="top" data-clipboard-text="
页面

export default {
data () {
return {
showView: true // 用于点击当前页的router时,刷新当前页
}
},
methods: {
refreshView () {
this.showView = false // 通过v-if移除router-view节点
this.$nextTick(() => {
this.showView = true // DOM更新后再通过v-if添加router-view节点
})
}
}
}
” title=”” data-original-title=”复制”>

<!-- html -->
<router-link :to="url" @click.native="refreshView">页面</router-link>
<router-view v-if="showView"/>

<!-- js -->
<script>
export default {
  data () {
    return {
      showView: true // 用于点击当前页的router时,刷新当前页
    }
  },
  methods: {
    refreshView () {
      this.showView = false // 通过v-if移除router-view节点
      this.$nextTick(() => {
        this.showView = true // DOM更新后再通过v-if添加router-view节点
      })
    }
  }
}
</script>
海计划公众号
(0)
上一篇 2020/03/29 01:44
下一篇 2020/03/29 01:44

您可能感兴趣的内容

  • Motrix入门基础_一款全能的下载工具

    Motrix入门基础 官方网址:https://motrix.app/ GitHub:https://github.com/agalwood/Motrix 简介描述:一款全能的下载…

    2020/03/06
  • 网站性能延迟加载图像的五种技巧指南教程_技巧小白入门

    网站性能延迟加载图像的五种技巧指南教程 由于图片是web上最流行的内容类型之一,因此网站的页面加载时间很容易成为一个问题。 即使经过适当的优化,图像也会有相当大的重量。这可能会对访…

    2020/03/20
  • antd中select下拉框值为对象选中的问题入门指南_antd使用帮助

    使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在option中的value值也是可能重复的 1.效果图2.select相关代码我这里用的是reactlet list = [{title: ‘普通会员’,id:

    2020/03/23
  • slate入门知识_漂亮的API文档生成工具

    slate入门知识 官方网址:https://spectrum.chat/slate GitHub:https://github.com/lord/slate 简介描述:漂亮的AP…

    2020/03/06
  • CSS实现单行、多行文本溢出显示省略号 指南攻略_文本小白常识

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出

    2020/03/24
  • vue2.6中slot的新用法使用教程_slot小白知识

    最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性。 真正有能力的插槽是什么?如果你是Vue的新手,或者还没有看到2.6版的变化,请继续阅读。也许学习插槽的最佳资源是Vue自己的文档,但是我将在这里给出一个纲要。插槽是什么?插槽是Vue组件

    2020/03/30
  • 递归算法的理解基础知识教程_递归基础知识教程

    递归:所谓递归,就是既有传递,又有回归,与其说是传递与回归,初学不如理解是一种 “循序递进”与“规律约束”。为什么这样说,因为递归算法相比较于循环在代码结构方面个人认为更加简洁清晰,清晰易懂,递归注重的是一种有序的规律,所以在每个程序开始之前,我们只要能找到一个使程序循序递进的规律;并且在整个过程都在用此规律进行传递,但是递归算法也有很大的缺点,会造成内存

    2020/03/24
  • HTTP协议知识点速览菜鸟知识_http小白攻略

    什么是HTTP?HTTP(HyperText Transfer Protocol),中文「超文本传输协议」。是互联网应用最广泛的网络协议基于 TCP 的应用层协议浏览器与服务器之间的数据传输协议。HTTP 协议和其他应用层协议一样,本质上是一种通信格式。HTTP 是信封,信封里面的信(HTML)是内容;但是没有信封,信也没办法寄出去。HTTP的特点无连接:每

    2020/03/22
  • CSS:BFC规则的应用自适应两栏布局使用攻略_布局小白基础

    两栏布局是写页面时经常用到的,要想实现两栏布局,就需要明白BFC规则,Block formatting context,直译为“块级格式化上下文”,可以简单的理解它为一个独立的区域,把区域内部元素与外部元素区分开,两者互不干扰。它的规则:1.内部元素会在垂直方向一个接一个放置。2.属于同一个BFC的两个元素上下margin会重叠。3.独立的BFC的区域不会与

    2020/03/20
  • V8引擎-枚举入门攻略位运算实现参数配置入门教程_引擎

    基本上从初始化引擎,到Isolate、handleScope、Context一直到编译其实都有记录,但是实在是无从下手。虽说我的博客也没有什么教学意义,但是至少也需要有一个中心和结论。很遗憾,上述的每一步都并互有关联,也就是单独拿出来写毫无意义。而从整体架构来阐述,然后细化到这每一步,我又还没有到那个境界。因此,综合考虑下,决定先暂时放弃逐步解析,优先产出一

    2020/04/05
  • 无间歇文字滚动入门指南 原生js实现新闻无间歇性上下滚动_滚动基础教程

    这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下。html+css部分:
    #moocbox{
    width: 600px;
    height: 22px;
    border: 1px solid #ccc;
    margin:60px auto;
    overflow: hidd

    2020/04/05
  • web前端以文件流的形式导出Excel文件菜鸟知识_文件入门基础教程

    一般web前端处理导出文件有两种方法:1、服务端返回完整URL,直接打开URL即可; 2、服务端返回数据流,前端解析数据流完成导出功能; 今天主要分享下第二种方式,直接上代码(兼容ie10以上):// url为服务端返回的流数据
    const exportParams = (url) => {const aLink = document.createElem

    2020/03/26
  • css中border-sizing属性详解和应用使用指南_盒子小白知识

    box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式,不再冗赘。1. 属性讲解content-box默认值,也是css2.1中的盒子模型。在计算width和height时候,不计算border、pad

    2020/04/03
  • Nuclide攻略教程Facebook专门为React开发的IDE

    Nuclide菜鸟指南 官方网址:https://nuclide.io/ GitHub:https://github.com/facebook/nuclide 简介描述:Faceb…

    2020/03/06
  • js中如果遇到低版本安卓设备调用setTimeout不生效解决办法小白知识_定时器入门基础

    工作中会遇到低版本安卓设备调用setTimeout不生效,既不会报错,里面的函数也不会执行,这里po一个解决办法,如果不执行则执行安卓自己封装的原生的setTimeout方法:sdk.setTimeout。注明:此方法为我们老大所写,放在这里惠存一下。基本方案
    /*******/
    (function(window){Promise.race([new Pro

    2020/03/22
  • Redis 的底层数据结构(整数集合)小白教程_结构使用教程

    当一个集合中只包含整数,并且元素的个数不是很多的话,redis 会用整数集合作为底层存储,它的一个优点就是可以节省很多内存,虽然字典结构的效率很高,但是它的实现结构相对复杂并且会分配较多的内存空间。而我们的整数集合(intset)可以做到使用较少的内存空间却达到和字典一样效率的实现,但也是前提的,集合中只能包含整型数据并且数量不能太多。整数集合最多能存多少个

    2020/03/24