URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

原文:https://blog.csdn.net/Dream_xun/article/details/83024487

其他参考:https://blog.csdn.net/liyunkun888/article/details/89022149   由于 router-view 是复用的,单纯的改变 id 的值并不会刷新 router-view

这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种
方式:provide / inject 组合 方式实现vue页面刷新

1.修改App.vue代码如下图所示

通过声明reload方法,控制isRouterAlice属性true or false 来控制router-view的显示或隐藏,从而控制页面的再次加载

2.在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行

App.vue代码如下:

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

<script>
import { truncate } from ‘fs‘;
export default {
  name: ‘App‘,
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

原文地址:https://www.cnblogs.com/robinunix/p/11093153.html

时间: 2024-10-11 17:04:02

URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新的相关文章

不使用spring的情况下用java原生代码操作mongodb数据库的两种方式

由于更改了mongodb3.0数据库的密码,导致这几天storm组对数据进行处理的时候,一直在报mongodb数据库连接不上的异常.   主要原因实际上是和mongodb本身无关的,因为他们改的是配置文件的密码,而实际上这个密码在代码中根本就没有使用,他们在代码中已经把用户验证信息写死.   在协助他们解决这个问题的时候,我看到他们代码中在和mongodb数据库交互时使用了已经不被建议使用的方法,于是便抽时间尝试了一下另一种被建议的方式实现各功能.   当然了,生产环境中用的是mongodb集群

【转载】为什么不建议&lt;=3G的情况下使用CMS GC

之前曾经有讲过在heap size<=3G的情况下完全不要考虑CMS GC,在heap size>3G的情况下也优先选择ParallelOldGC,而不是CMS GC,只有在暂停时间无法接受的情况下才考虑CMS GC(不过当然,一般来说在heap size>8G后基本上都得选择CMS GC,否则那暂停时间是相当吓人的,除非是完全不在乎响应时间的应用),这其实也是官方的建议(每年JavaOne的GC Tuning基本都会这么讲). 为什么给了一个这么“武断”的建议呢,不是我对CMS GC有

客户端禁用cookie情况下的URL重写

客户端禁用cookie情况下的URL重写: servlet: package com.stono.servlet.listenerorder; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest

三、angularjs 如何在页面没有登录的情况下阻止用户通过更改url进入页面--$stateChangeStart

有时候用户没有登录或者在某些情况下你是不希望用户进入页面,但是angular的路由机制可以让用户直接通过更改Url进入页面,如何处理这一问题呢? --监控路由转换机制 $stateChangeStart 具体的操作如下: //监控路由转换 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {//上面的参数是固定的 if(toParams.name === 'q

把cookie以json形式返回,用js来set cookie.(解决手机浏览器未知情况下获取不到cookie)

1.继上一篇随笔,链接点我,解决手机端cookie的问题. 2.上次用cookie+redis实现了session,并且手机浏览器可能回传cookies有问题,所以最后用js取出cookie跟在请求的url后面. 3.但是今天发现了新的问题,js取cookie存的sessionId为空,情况如下: (1)QQ浏览器能获取某些cookie,另一些cookie获取为空,猜测是后台Response SetCookie的时候,手机端浏览器没能良好的接受. (2)UC浏览器测试正常. (3)Safari情

PHP通过加锁实现并发情况下抢码实现

需求:抢码功能 要求: 1.特定时间段才开放抢码: 2.每个时间段放开的码是有限的: 3.每个码不允许重复: 实现: 1.在不考虑并发的情况下实现: function get_code($len){ $CHAR_ARR = array('1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','X','Y','Z','W','S','R','T')

Shiro登录错误500(rememberMe=true情况下)

描述:debugger信息在"Added HttpServletResponse Cookie [rememberMe=jCT60vZQbUSFVlE......"就不往下走了,断点调试,发现已经登录成功,跳转到登录url的时候跳转不过去,后台没有报错信息,只是/login请求的http状态码为500:手动进入登录成功后的页面,发现已经登录成功!session信息已经存在,只是没有rememberMe的cookie信息...... 找了好几天,发现去掉下面标注段代码就没有问题,多次验证

HTTPS的证书未经权威机构认证的情况下,访问HTTPS站点的两种方法

注意一下文章中提到的jsse在jdk1.4以后已经集成了,不必纠结. 摘 要 JSSE是一个SSL和TLS的纯Java实现,通过JSSE可以很容易地编程实现对HTTPS站点的访问.但是,如果该站点的证书未经权威机构的验证,JSSE将拒绝信任该证书从而不能访问HTTPS站点.本文在简要介绍JSSE的基础上提出了两种解决该问题的方法. 引言 过去的十几年,网络上已经积累了大量的Web应用.如今,无论是整合原有的Web应用系统,还是进行新的Web开发,都要求通过编程来访问某些Web页面.传统的方法是使

OC JS交互(通常情况下,如果网页写得正规的话,是可以正常交互的,之前就遇到后台写h5始终拿不到事件,元素也拿不到,更别说交互了,真是奇了怪了)

自动填充表单 @"document.getElementById('loginid').value = '这里填入你的用户名';document.getElementById('userpassword').value = '这里填入你的密码';"; 根据ID拿到输入用户名的输入框并给值 根据ID拿到输入密码的输入框并给值 自动点击登录按钮 @"document.getElementById('login').click()" 根据ID获取登录按钮这个元素,并调用其