vue 刷新当前页面或者跳转页面时候刷新

2023-11-07

为什么会有这篇文章

1 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的
2 采用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好

解决办法

方式一

先新建一个空白页面, 先跳到空白页面, 然后再从空白页面跳转回来 history.go(-1) 这样的方式 在我这里测试不成功

方式二

直接刷新, 整体页面刷新 history(0) this.$router.push(“path”)

  this.$router.push('/personal_base');

方式三

比较终极解决办法, 页面闪烁是不存在的, 几乎没有啥毛病。
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>

<style lang="less">
  @import './style/common';
</style>

在页面应用

inject: ['reload'],



this.reload();

新加的配置标记如下:
这里写图片描述

应用
这里写图片描述

具体原因知识 简单介绍
provide /injext
provide: 选项应该是一个对象或者返回一个对象的函数。 该对象包含可注入其子孙的属性。
inject : 一个字符串数组或者一个对象,对象的 key 是本地的绑定名

提示:provide和inject绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

这篇文章帮助我解决了问题
https://blog.csdn.net/qq_16772725/article/details/80467492

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 刷新当前页面或者跳转页面时候刷新 的相关文章

随机推荐

  • 【华为OD统一考试B卷

    在线OJ 已购买本专栏用户 请私信博主开通账号 在线刷题 运行出现 Runtime Error 0Aborted 请忽略 华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一
  • 两数之和(C++)

    两数之和 C 两数之和 问题描述 问题求解 问题总结 两数之和 问题描述 给定一个整数数组 nums 和一个整数目标值 target 请你在该数组中找出 和为目标值 target 的那 两个 整数 并返回它们的数组下标 你可以假设每种输入只
  • T-Kernel 里 sleep API

    T Kernel 里有类似于 msleep 的函数 tk slp tsk TMO tmout TMO Timeout time Time base 1 millisecond 32 bit or higher signed integer
  • LeetCode62:不同路径(深搜 && 动态规划)

    题目 一个机器人位于一个 m x n 网格的左上角 起始点在下图中标记为 Start 机器人每次只能向下或者向右移动一步 机器人试图达到网格的右下角 在下图中标记为 Finish 问总共有多少条不同的路径 来源 力扣 LeetCode 链接
  • python itertools功能详解

    python itertools功能详解 介绍 itertools是python内置的模块 使用简单且功能强大 这里尝试汇总整理下 并提供简单应用示例 如果还不能满足你的要求 欢迎加入补充 使用只需简单一句导入 import itertoo
  • LeetCode 剑指 Offer 13. 机器人的运动范围

    目录结构 1 题目 2 题解 1 题目 地上有一个m行n列的方格 从坐标 0 0 到坐标 m 1 n 1 一个机器人从坐标 0 0 的格子开始移动 它每次可以向左 右 上 下移动一格 不能移动到方格外 也不能进入行坐标和列坐标的数位之和大于
  • 行走在路,偶有弯道——致这半年

    不知不觉半年又转瞬即逝 不得不说总结是一个回顾过去开创未来的时刻 一直在拖着半年总结 因为害怕面对自己不好的一面 害怕想象半年前的目前 对比半年后的成果 但是总结终究是要有的 因为有总结 我们才会更加系统的认识自己 反思自己 然后在今后的生
  • linux的文件安装路径

    如果是别人发布的二进制包 可执行文件通常都安装到 usr bin 下面 如果是自己从源代码安装的 可执行文件通常都在 usr local bin 下面 除非配置时指定了安装位置 例如 rpm ivh xxx1 rpm 可执行文件通常都安装到
  • UIViewAnimation动画与Core Animation的CATransition类动画

    void leftClick UIView beginAnimations nil context nil display mode slow at beginning and end UIView setAnimationCurve UI
  • Dubbo+spring+springmvc+mybatis+Maven+Jetty+Mysql+Ajax多框架融合学习网址收藏

    原文地址 http blog csdn net wp1603710463 article details 49232797 Dubbo spring springmvc mybatis Maven Jetty Mysql Ajax多框架融合
  • keras的Sequential神经网络,keras实现卷积神经网络

    1 如何用keras实现多变量输入神经网络 要点如下 1 神经网络基本结构 应该是输入层 若干个隐含层 输出层 2 输入层应该有7个输入变量 3 隐含层层数自定 但每层要超过7个神经元 4 输出层可以用softmax之类的函数 将隐含层的输
  • C/C++中时间函数的介绍

    1 概念 在C C 中 对字符串的操作有很多值得注意的问题 同样 C C 对时间的操作也有许多值得大家注意的地方 最近 在技术群中有很多网友也多次问到过C 语言中对时间的操作 获取和显示等等的问题 下面 在这篇文章中 笔者将主要介绍在C C
  • M1芯片运行ReactNative踩坑

    运行 报 Flipper 什么找不到的错 具体什么错记不清了 解决办法 编辑 ios Podfile 删除以下内容 use flipper post install do installer flipper post install ins
  • 技术栈选型之微服务公共关注点及Dubbo、Spring Cloud和K8s横向比对

    技术栈选型之微服务公共关注点及Dubbo Spring Cloud和K8s横向比对 文章目录 技术栈选型之微服务公共关注点及Dubbo Spring Cloud和K8s横向比对 前言 微服务公共关注点 Dubbo Spring Cloud和
  • Mac电脑不能读取您的磁盘怎么办

    品牌型号 MacBook Air 系统 macOS 10 13 软件版本 Tuxera Ntfs for mac 2021 Mac电脑不能读取磁盘数据 无非是两种情况 一是固件故障 二是磁盘格式问题 在常用的三种磁盘格式NTFS FAT 3
  • Quartz 的使用

    项目代码 https github com yuleiqq quartz example tree master quartz study 使用Quartz 的调度器之前 需要先实例化该调度器 Scheduler 实例化完成之后 就可以启动
  • python学习:异常处理、with用法以及utf8中文显示

    usr bin env python coding utf8 为文件中每行的开头添加行号 def addLineNumberForFile srcFilePath dstFilePath if srcFilePath dstFilePath
  • SpringWeb(SpringMVC)

    目录 SpringWeb介绍 搭建 SpringWeb SpringWeb介绍 Spring Web是一个基于 Servlet API 构建的原始 web 框架 用于构建基于MVC模式的Web应用程序 在 web 层框架历经 Strust1
  • Hive实现分组排序、分组求取topN或者分页的实现方法

    使用到的语法 ROW NUMBER OVER PARTITION BY COL1 ORDER BY COL2 简单的说row number 从1开始 为每一条分组记录返回一个数字 这里的ROW NUMBER OVER ORDER BY xl
  • vue 刷新当前页面或者跳转页面时候刷新

    为什么会有这篇文章 1 用vue router 重新路由的时候到当前页面的时候是不进行刷新的 2 采用window reload 或者router go 0 hisory go 0 刷新的时候整个浏览器进行刷新加载 但是页面闪烁 体验不好