Vue无感刷新当前页面

使用 Vue 选项/组合 Api provide / inject Api 地址，此方法可以实现无感刷新并且不会出现闪烁的空白。

首先在根组件 App.vue 定义这个方法

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

export default {//暴露 reload 这个方法，方便组件调用provide() {return {reload: this.reload,}},data() {return { routerAlive: true }},methods: {//重新加载的方法reload() {this.routerAlive = falsethis.$nextTick(function () {this.routerAlive = true})},},
}

这样就可以在你要刷新的页面组件调用这个方法

export default {inject: ["reload"],......methods:{handleReload(){//在你要用到的地方调用这个重新刷新的方法this.reload()}}
}

最后如果不考虑用户体验的话，也可以用下面的方法：

// 1.window.location.reload()应该是刷新.相当于 按页面刷新按钮
window.location.reload()

Vue无感刷新当前页面相关推荐

Vue 无感刷新token
关于无感刷新的理解: 实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新to ...
VUE单页面应用无感刷新当前页面
刷新当前页面常用的方法是: 第一种方法是: window.reload(): 第二种方法是: this.$router.go(0); 这两种方法是可以刷新当前面,但刷新的那一瞬间,页面会有一瞬间空白闪 ...
vue 无感刷新页面
共三种方法 1.原始方法: location.reload(); 2.vue自带的路由跳转: this.$router.go(0); 用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验 ...
token过期?页面如何实现无感刷新?
我们为什么要无感刷新呢? 我们都知道,后台返回的token是有时效性的,时间到了,你在交互后台的时候,后台会判断你的token是否过期(安全需要),如果过期了就会通过邪恶的手段逼迫你重新登陆! 无感刷 ...
前端项目中英文切换无感刷新
非vue项目实现: 将所有需要翻译的文本都存储在一个JSON文件中,这个文件包含中英两种语言的文本,例如: {"title": {"en": "We ...
使用Axios进行无感刷新Token
前言本人在开发项目时,在做登录模块时,参考了oauth2,在用户认证成功后会返回给前端一些令牌相关数据.接下来,再用进行接口请求时,前端根据令牌数据进行一系列的判断,然后做出最好的选择. 举个例子: ...
关于实现token无感刷新的解决方案
问题引入在开发中为了安全或满足分布式场景,通常会舍弃原有的session认证手段,而采用jwt(json web token):但是使用token难免遇到token有效期的问题,如果token长期有 ...
Laravel6通过jwt(tymon/jwt-auth)实现API用户无感刷新TOKEN
Laravel6通过jwt实现API用户无感刷新TOKEN 1.TOKEN是什么 2.jwt是什么 3.jwt安装&配置 3.1.通过composer安装 3.2.发布配置 3.3.生成加密密 ...
token过期怎么办无感刷新token
(1)可以通过响应拦截器或者全局前置守卫强制跳转登录页 // 全局前置守卫 router.beforeEach((to, from) => {let token = sessionStorage ...

Vue无感刷新当前页面

Vue无感刷新当前页面相关推荐

最新文章

热门文章