vue最实用的无感刷新页面方法

最新推荐文章于 2024-05-08 09:40:52 发布
最新推荐文章于 2024-05-08 09:40:52 发布
阅读量2k 收藏 5
点赞数
文章标签： vue.js 前端
原文链接：https://zhuanlan.zhihu.com/p/74796241
版权

首先，要修改下你的app.vue，通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这边定义了isRouterAlive //true or false 来控制

其次：然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后直接用this.reload来调用就行，简单实用！！！

 

 vue最实用的无感刷新页面方法 - 卢梦梦的文章 - 知乎 https://zhuanlan.zhihu.com/p/74796241

Aflew
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目如何刷新当前页面的方法
08-27
主要介绍了vue项目如何刷新当前页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue form 表单提交后刷新页面的方法
10-18
今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue无感刷新当前页面
Cherry
02-18 3977
使用 Vue 选项/组合 Api provide / inject Api 地址，此方法可以实现无感刷新并且不会出现闪烁的空白。 首先在根组件 App.vue 定义这个方法 <template> <div id="app"> <router-view v-if="routerAlive"></router-view> </div> </template> export default { /
无感刷新token（requestFreshToken ）
weixin_44152684的博客
07-09 504
无感刷新token（requestFreshToken ）
如何做到无感刷新Token?
最新发布
lxw1844912514的博客
05-08 43
????????最新2024IDEA永久激活(支持全家桶）????????关注上面公众号回复“激活码”，获取最新永久激活来源：juejin.cn/post/7316797749517631515为什么需要无感刷新Token？自动刷新token前端token续约疑问及思考图片为什么需要无感刷新Token？「最近浏览到一个文章里面的提问，是这样的：」当我在系统页面上做业务操作的时候会出现突然闪退的情况，然后跳转到登录页面需要...
vue项目刷新当前页面的三种方法
weixin_52065173的博客
09-15 8549
vue项目刷新当前页面的三种方法
Vue 无感刷新token
前端菜鸟好先森的博客
11-01 5491
Vue 无感刷新token，刷新token的解决方案
vue 项目无痕刷新页面，router-view控制
start_sea的博客
08-03 897
vue 项目无痕刷新页面，router-view控制 vue项目开发过程中，需要在页面提交表单信息之后清空还原，即恢复页面初始状态，第一想法就是对当前页面刷新，重新加载。 想起location.reload()方式和this.$router.go(0)方式跳转，但两种方式都会出现明显的闪屏（即页面出现明显空白时间），因此研究一番之后采用router-view控制方式： 一、设置App.vue文件： 　　通过true和false值控制页面路由部分的显隐， 　　代码： <template> 　　
vue通过路由实现页面刷新的方法
08-28
本篇文章主要介绍了vue通过路由实现页面刷新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解vue几种主动刷新的方法总结
12-03
1.[removed].reload(),是原生JS提供的方法，this.$router.go(0):是vue路由里面的一种方法，这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按F5刷新页面，会有短暂的白屏，相当于页面的...
vue缓存的keepalive页面刷新数据的方法
10-17
主要介绍了vue缓存的keepalive页面刷新数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 无痕刷新
weixin_34203426的博客
11-16 525
最近遇到一个需求，需要刷新当前页面来更新数据，网上找了很多方法，在这里做个总结。 这里主要记录三种方法，分别是：强制刷新、伪造刷新、无痕刷新。 强制刷新 window.location.reload()，原生 js 提供的方法； this.$router.go(0)，vue 路由里面的一种方法； 这两种方法都可以达到页面...
前端无感刷新token
Rachel的博客
03-19 5711
单个接口的刷新token很好解决，难点是多接口并发 首先将token过期后的请求存到一个数组队列中，想办法让这个请求处于等待中，一直等到刷新token后再逐个重试清空请求队列。 那么如何做到让这个请求处于等待中呢？为了解决这个问题，我们得借助Promise。将请求存进队列中后，同时返回一个Promise，让这个Promise一直处于Pending状态（即不调用resolve或reject），此时这...
vue项目如何刷新当前页面
热门推荐
回亦的博客
05-27 24万+
想必大家在刨坑vue的时候也遇到过下面情形：比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种：如果希望点击确定的时候，Dialog 对话框关闭的时候，当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下那么表格的数据可以重新加载，Dialog 对话框设置的数据可以在确定后刷新出现在页面上这时候我们最直接的思维就是想到下...
vue无感刷新
JT_terry的博客
08-27 454
1、在app.vue设置reload，让组件重新加载。 <template> <divid="app"> <router-viewv-if="routerShow"/> </div> </template> <script> exportdefault{ name:'App', provide(){ return{ reload:this.reload } }...
有感定时刷新与无感定时刷新，谁更能触碰用户爽点
默的博客
08-07 303
在开发过程中其实开发者角度与用户角度是完全不同的，个人总结为如下有感无感技术会不会影响用户使用？会不会照成用户不便？我知道刷新了，我完成了，我开心(触碰的是开发者爽点)用户到底有没有刷新，为什么数据看起来没有变化他空白了一小会，哦原来是刷新了。......
vue跳转页面常用的几种方法
宋文轩
07-09 9万+
vue跳转页面有好几种不同方法，下面将通过实例代码给大家介绍，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。 1：router-link跳转 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始；如果不带'/'，则从当前路由开始。 2.带p
vue3 退出登录无感刷新页面
06-10
要实现无感刷新页面的退出登录，可以使用路由守卫和localStorage来实现。下面是一个基本的实现思路： 1. 在用户退出登录时，清空localStorage中的用户信息，并重定向到登录页面。 2. 在路由配置中使用beforeEach路由守卫，检查用户是否已登录。 3. 如果用户未登录，则重定向到登录页面；如果用户已登录，则继续访问目标路由。 4. 当用户访问需要登录才能访问的路由时，路由守卫会检查localStorage中是否存在用户信息，如果存在则允许访问，否则重定向到登录页面。 下面是一个示例代码： ``` // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') // router/index.js import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', name: 'Home', component: Home, meta: { requiresAuth: true } // 需要登录才能访问 }, { path: '/login', name: 'Login', component: Login } ] const router = createRouter({ history: createWebHistory(), routes }) // 路由守卫 router.beforeEach((to, from, next) => { // 检查用户是否已登录 const isAuthenticated = localStorage.getItem('user') !== null if (to.matched.some(record => record.meta.requiresAuth)) { // 需要登录才能访问的路由 if (!isAuthenticated) { // 未登录，重定向到登录页面 next('/login') } else { // 已登录，继续访问目标路由 next() } } else { // 不需要登录即可访问的路由，直接访问 next() } }) export default router // components/Logout.vue export default { methods: { logout () { // 清空localStorage中的用户信息 localStorage.removeItem('user') // 重定向到登录页面 this.$router.push('/login') } } } ``` 在这个示例中，我们通过localStorage来保存用户信息，如果用户已登录，则localStorage中会存在'user'这个键。在需要登录才能访问的路由中，我们使用beforeEach路由守卫来检查用户是否已登录，如果未登录，则重定向到登录页面。当用户退出登录时，我们清空localStorage中的'user'键，并重定向到登录页面。这样，用户退出登录后，再次访问需要登录才能访问的路由时，路由守卫会检查到localStorage中不存在'user'键，从而重定向到登录页面，实现了无感刷新页面的退出登录。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值