Vue 刷新当前页面,并重新加载页面数据

2023-10-30

业务场景:在管理后台,在执行完,增,删,改,操作的时候。我们需要刷新一下页面,重载数据。在JQ中我们会用到location.reload()方法,刷新页面;在vue中,这里需要用到一个 provide / inject 这对用例。(其他方法:this.$router.go(0),会强制刷新,出现空白页面体验不好)

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

实现原理就是通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果,show -> flase -> show

具体代码如下:

1.首先在我们的根组件APP.vue里面,写入刷新方法,路由初始状态是显示的

<template>
  <div id="app">
    <keep-alive>
    <router-view  v-show="$route.meta.keepAlive"/>
    </keep-ali
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue 刷新当前页面,并重新加载页面数据 的相关文章

随机推荐

  • anaconda+pytorch安装说明

    第一步 anconda的安装 大家可以参考以下博文 写的比较简约 看起来比较清爽 https blog csdn net ITLearnHall article details 81708148 Anacond的介绍 Anaconda指的是
  • chisel线网(wire)和寄存器(reg)详解(更新)

    主体内容摘自 https blog csdn net qq 34291505 article details 87714172 在Verilog里 模块内部主要有 线网 wire 和 四态变量 reg 两种硬件类型 它们用于描述数字电路的组
  • QVariant的使用

    在有些情况下 我们希望把数据存储在一个变量中 例如 我有一个数组 既希望存整数 又希望存浮点数 还希望存string 想了一个方法 创建一个object类 这是一个很大的类 里面几乎包含了所有类型的数据 如下 class Object pu
  • Java合并两个有序数组

    合并排序 将两个已经排序的数组合并成一个数组 其中一个数组能容下两个数组的所有元素 public class MergeArray public MergeArray public static ArrayList
  • 【APB协议详解】

    APB协议详解 APB Advanced Peripheral Bus 作为高级外设总线是AMBA协议之一 也是最基本的总线协议 按照ARM官方定义 APB是一种低成本的接口协议 可以实现低功耗以及精简的接口设计 降低接口设计的复杂度 AP
  • adb操作提示Read-only file system问题

    Android adb调试时 经常会遇到权限问题 failed for system lib libmm test so Read only file system 即使Root设备 在向 system等系统文件夹操作时 比如push rm
  • Shell基础—正则表达式(通配符、模式表达式)详解【附例】

    Shell基础 正则表达式 正则表达式是一种可以用于模式匹配和替换的工具 通过正则表达式 Shell可以使用一系列的特殊字符构建匹配模式 然后将匹配模式与待比较字符串或文件进行比较 根据比较对象中是否包含匹配模式 执行相应的程序 1 通配符
  • 【环境搭建】Notepad++显示16十六进制编码

    环境搭建 Notepad 显示16十六进制编码 by 041 打开插件 gt 插件管理 找到HEX Editor 安装 重启Notepad 选择插件 gt HEX Editor gt View in HEX 即可显示16进制文件
  • ubuntu18.04使用Mysql指令

    前言 在使用Ubuntu中 对MySQL不熟悉 在实践中不断总结 不断更新 目录 前言 在使用Ubuntu中 对MySQL不熟悉 在实践中不断总结 不断更新 一 安装MySQL 1 更新 2 安装数据库 3 查看版本 二 sql语句 1 启
  • F - Tickets

    F Ticketshttps vjudge csgrandeur cn problem Gym 101911F 暴力 超时 时间复杂度 2 1e5 1e6 别忘了还有查询 include
  • TCP-服务器监听

    package main import fmt net func process conn net Conn 这里我们循环的接收客户端发送的数据 defer conn Close 关闭conn for 创建一个新的切片 buf make b
  • Java抽象类和接口

    一 抽象类 在面向对象的概念中 所有对象都是通过类来描绘的 但并不是所有类都是用来描绘对象的 如果一个类中没有足够的属性和行为来描绘一个完整具体的对象 Java 提供了一个语法 抽象类 例如我们需要一个描述形状的类 成员方法可以输出当前的形
  • Python获取电脑信息

    我做了一个Python获取电脑信息的程序 小部分代码是网上找的 本来想把这个做成一个坑人小程序的 到后面没有灵感了 有想法的可以帮我做一下 私聊发代码给我 代码 pycharm运行通过 coding utf 8 import wmi imp
  • C++数据结构X篇_08_C++实现栈的顺序存储与链式存储

    本篇参考C 实现栈的顺序存储与链式存储整理 先搞懂结构框架 后期根据视频利用c对内容实现 也可以对c有更高的提升 文章目录 1 栈的顺序存储 2 栈的链式存储 栈是一种特殊的数据结构 栈中数据先进后出 且栈中数据只能从头部出栈 能直接访问的
  • 数据库删除数据的方式

    数据库删除数据的方式主要是有三种 drop delete truncate 他们之间的区别在于 1 删除的内容不同 drop 用于删除数据库 数据表 以及 删除数据表中的字段 删除数据库 drop database 数据库名 删除数据表 d
  • Numpy、Pandas使用大全与各参数详解

    目录 一 numpy 1 属性 方法与操作 1 属性 2 方法 3 操作 2 文件读取与保存 1 文件读取 2 文件保存 3 矩阵生成 二 Pandas 1 属性与方法 1 属性 2 方法 2 数据选取 1 取行 2 取列 3 数据处理 1
  • 遇到问题----shrio------shiro登录,多个项目session被覆盖问题---两个web项目会导致shiro的session污染

    情况 遇到问题 shrio shiro登录 多个项目session被覆盖问题 一个项目两个web模块会导致shiro的session污染 表现为 我在同一台机子上部署了两个都使用了shiro管理的web项目 它们的访问路径除了端口不一样 i
  • PaddleDetection算法分析(13)

    2021SC SDUSC 分析完了PaddleDetection的竞赛冠军模型 接下来分析移动端模型 PaddleDetection目前提供一系列针对移动应用进行优化的模型 主要支持以下结构 其中大量网络应用了ssd算法 我们接下来进行对其
  • CPU密集型和IO密集型任务的权衡:如何找到最佳平衡点

    关于作者 CSDN内容合伙人 技术专家 从零开始做日活千万级APP 专注于分享各领域原创系列文章 擅长java后端 移动开发 人工智能等 希望大家多多支持 目录 一 导读 二 概览 三 CPU密集型与IO密集型 3 1 CPU密集型 3 2
  • Vue 刷新当前页面,并重新加载页面数据

    业务场景 在管理后台 在执行完 增 删 改 操作的时候 我们需要刷新一下页面 重载数据 在JQ中我们会用到location reload 方法 刷新页面 在vue中 这里需要用到一个 provide inject 这对用例 其他方法 thi