020:vue刷新跳转当前页面

news2024/11/28 19:38:28

在这里插入图片描述

第020个

查看专栏目录: VUE — element UI

VUE刷新当前页面在很多场合都会使用到,比如在搜索页搜索内容并展示在搜索页?在当前页删除,添加内容的等,查看更新后的结果等。

方法一

用vue-router 重新路由的时候到当前页面的时候是不进行刷新的

方法二

采用window.reload() 或者router.go(0), hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好

以下是试验过的最有效的方法:

provide /inject 组合,作用是: 允许一个祖先组件向其所有子孙后代注入一个依赖, 无论组件层次有多深,并在其上下游关系成立时间里始终生效。

APP.vue中:

<template> 
  <div id="app" class="fillcontain"> 
    <router-view v-if="isRouterAlive"></router-view> 
  </div> 
</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 
        }); 
      }, 
    }, 
 
  } 
</script>

应用的局部页面:

inject: ['reload'], 
 
this.reload(); 

在这里插入图片描述

provide /injext 简单介绍

provide: 选项应该是一个对象或者返回一个对象的函数。 该对象包含可注入其子孙的属性。
inject : 一个字符串数组或者一个对象,对象的 key 是本地的绑定名
提示:provide和inject绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/664364.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue移动端瀑布流布局

需求: 瀑布流, 图片大小统一不变, 描述长度根据内容确定, 不超过三行. 分两列,那边矮,下个元素就放那边 如图所示: 1. 给item设置top,和left 由于我的项目做了 amfe-flexible适配所以使用rem 完整 template <template><div class"HomePage"><van-l…

【好书精读】网络是怎样连接的 之 全世界 DNS 服务器的大接力

&#xff08;该图由AI制作 学习AI绘图 联系我&#xff09; 目录 域名的层次结构 寻找相应的 DNS 服务器并获取 IP 地址 通过缓存加快 DNS 服务器的响应 DNS 服务器的基本工作就是接收来自客户端的查询消息&#xff0c;然后根据消息的内容返回响应 客户端的查询消息&#xf…

信息量、熵、联合熵、条件熵、相对熵、交叉熵、JS散度、Wasserstein距离

信息量 I ( x i ) l o g 1 P ( x i ) − l o g P ( x i ) I(x_i)log \frac {1}{P(x_i)}-logP(x_i) I(xi​)logP(xi​)1​−logP(xi​) 信息量&#xff08;self-information&#xff09;&#xff0c;又译为信息本体&#xff0c;由克劳德 香农&#xff08;Claude Shannon&…

使用投票回归器VotingRegressor对糖尿病数据集进行回归预测

目录 1. 作者介绍2. 投票回归器VotingRegressor简介2.1 VotingRegressor介绍2.2 VotingRegressor算法遵循以下关键原则&#xff1a; 3. 使用投票回归器VotingRegressor对糖尿病数据集进行回归预测实验过程3.1 代码流程介绍3.2 完整代码3.3 实验结果 1. 作者介绍 余成伟&#x…

【深度学习】YOLOv8训练过程,YOLOv8实战教程,目标检测任务SOTA,关键点回归

文章目录 可用资源资源安装模型训练&#xff08;检测&#xff09;模型pridict模型导出 可用资源 https://github.com/ultralytics/ultralytics 官方教程&#xff1a;https://docs.ultralytics.com/modes/train/ 资源安装 更建议下载代码后使用 下面指令安装&#xff0c;这样…

Hug pylons, not trees 拥抱电网,而非树木 | 经济学人20230408版双语精翻

《经济学人》4月8日周报封面即社论区&#xff08;Leaders&#xff09;精选文章&#xff1a;《拥抱电网&#xff0c;而非树木》&#xff08;Hug pylons, not trees&#xff09;。 Hug pylons, not trees 拥抱电网&#xff0c;而非树木 The case for an environmentalism that bu…

100天精通Golang(基础入门篇)——第9天:Go语言程序的循环语句

&#x1f337; 博主 libin9iOak带您 Go to Golang Language.✨ &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &#x1f30a; 《I…

UWB定位的两种解法

UWB(Ultra-Wideband)技术是一种短脉冲无线电技术(短脉冲意味着信号的带宽很大&#xff0c;因此称为超宽带)&#xff0c;其应用非常广泛&#xff0c;其中之一就是室内定位&#xff0c;通过计算信号传播的时间差&#xff0c;可以得到标签和基站之间的距离,如果有足够多的基站&…

Unity核心1——图片导入与图片设置

一、图片导入概述 ​ Unity 支持的图片格式有很多 BMP&#xff1a;是 Windows 操作系统的标准图像文件格式&#xff0c;特点是几乎不进行压缩&#xff0c;占磁盘空间大 TIF&#xff1a;基本不损失图片信息的图片格式&#xff0c;缺点是体积大 JPG&#xff1a;一般指 JPEG 格…

【Elasticsearch】 之 Translog/FST/FOR/RBM算法

目录 Translog FST/FOR/RBM算法解析 FST FOR&#xff08;Frame of Reference&#xff09;: RBM&#xff08;Roaring Bitmaps&#xff09;-(for filter cache) Translog es是近实时的存储搜索引。近实时&#xff0c;并不能保证被立刻看到。数据被看到的时候数据已经作为一…

工业级以太网RJ45温湿度监控系统解决方案之关键POE供电温湿度传感器

目 录 一、关键词…………………………………………………………………………3 二、 产品概述………………………………………………………………………3 三、 应用范围………………………………………………………………………3 四、 产品特点………………………………

Linux0.11内核源码解析-file_dev.c

目录 功能描述 int file_read(struct m_inode * inode, struct file * filp, char * buf, int count) int file_write(struct m_inode * inode, struct file * filp, char * buf, int count) 功能描述 该文件主要是由两个函数file_read()和file_write()组成&#xff0c;提供…

Nginx网站服务——服务基础

文章目录 一.Nginx服务基础1.关于Nginx的特点2.简述Nginx和Apache的差异3.Nginx 相对于 Apache 的优点4.Apache 相对于 Nginx 的优点5.阻塞与非阻塞6.同步与异步7.nginx的应用场景 二.编译安装nginx服务1.在线安装nginx1.1 yum部署Nginx1.2 扩展源安装完后直接安装Nginx 2.ngin…

MySQL数据库---存储引擎(MyISAM与InnoDB)

目录 前言一、存储引擎概念介绍二、MyISAM三、InnoDB四、配置合适的存储引擎总结 前言 数据库存储引擎是数据库底层软件组织&#xff0c;数据库管理系统&#xff08;DBMS&#xff09;使用数据引擎进行创建、查询、更新和删除数据。不同的存储引擎提供不同的存储机制、索引技巧…

Vue中如何进行图像识别与人脸对比

Vue中如何进行图像识别与人脸对比 随着人工智能的发展&#xff0c;图像识别和人脸识别技术已经被广泛应用于各种应用程序中。Vue作为一种流行的前端框架&#xff0c;提供了许多实用工具和库&#xff0c;可以帮助我们在应用程序中进行图像识别和人脸识别。在本文中&#xff0c;…

docker换源(docker镜像源)pull超时(pull镜像超时)/etc/docker/daemon.json

文章目录 pull了n次都超时&#xff0c;也是醉了更换镜像源步骤1. 打开终端并以管理员身份登录到Docker主机。2. 编辑Docker配置文件daemon.json。该文件用于配置Docker守护进程的参数。3. 在daemon.json文件中添加以下内容&#xff0c;将<镜像源地址>替换为您选择的镜像源…

基于matlab仿真具有不同传感器模式的锥形阵列(附源码)

一、前言 此示例说明如何在不同的阵列配置上应用锥形和模型细化。它还演示了如何创建具有不同元素模式的数组。 二、ULA 逐渐变细 本节介绍如何在均匀线性阵列 &#xff08;ULA&#xff09; 的元素上应用泰勒窗口以降低旁瓣电平。 比较锥形阵列和非锥形阵列的响应。请注意锥形U…

外部局域网直接访问WSL2

1. 开启hyper-v 1、首先&#xff0c;进入控制面板—程序—启用或关闭windows功能&#xff0c;勾选hyper-v&#xff0c;确认后重启电脑。2、打开 Windows PowerShell&#xff0c;输入 systeminfo 命令 能够看到出现了很多处理器的信息&#xff0c;最末尾有个 Hyper-V 要求&…

Redis 2023面试5题(一)

一、Redis是单线程还是多线程 在面试中&#xff0c;当被问到Redis是单线程还是多线程这个问题时&#xff0c;可以按照以下思路进行回答&#xff1a; 首先&#xff0c;Redis的核心业务部分是单线程的&#xff0c;即命令处理部分是单线程的。然而&#xff0c;Redis也支持多路复…

Java---第四章(数组基础,冒泡排序,二分查找,多维数组)

Java---第四章 一 数组基本知识数组操作 二 数组实操数组排序二分查找二维数组 一 数组 基本知识 概念&#xff1a; 数组是编程语言中的一种常见的数据结构&#xff0c;能够存储一组相同类型的数据 作用&#xff1a; 存储一组相同类型的数据&#xff0c;方便进行数理统计&am…