vue实现刷新整个页面无空白

最新推荐文章于 2024-07-29 13:25:09 发布
最新推荐文章于 2024-07-29 13:25:09 发布
阅读量845 收藏 1
点赞数
文章标签： javascript vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43806733/article/details/107962521
版权
本文介绍了在Vue应用中如何使用this.$router.go(0) 和 location.reload()刷新页面，同时解决因刷新导致的短暂空白问题。通过在App.vue配置router-view，并利用Vue的provide/inject特性，实现在页面刷新过程中保持内容显示，从而避免空白状态。
摘要由CSDN通过智能技术生成

我们需要刷新整个页面，可以使用this.$router.go(0) 和 location.reload()，这两种方法都可以实现整个页面的刷新，但是他有一个弊端，就是会造成页面有短暂的空白的现象，所以基于需求可以通过vue中的方法实现无空白的刷新。
首先在App.vue里面去配置router-view的相关操作，如下：

利用provide inject的属性，在需要的地方调用这个方法即可。

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  <
最低0.47元/天 解锁文章
半夏微蓝
关注
vue页面刷新空白
weixin_43061527的博客
02-18 1572
vue项目做的是hash的不利于cdn缓存，cdn并不识别# -------------------------------------------------------------------- 原因不再阐述 自己用nginx试了下子，直接copy代码；没毛病； server { listen 8888;#默认端口是80，如果端口没被占用可以不用修改 ...
vue刷新页面（不出现空白）
guapizz的博客
05-23 5974
本文所介绍的方式是用provide / inject 组合的方法 第一步，修改app.vue文件，如下面的方式 <template> <div id="app"> <router-view v-if="isAlive"></router-view> </div> </template> <scri...
解决vue项目刷新页面出现空白页问题
最新发布
L1549453237的博客
07-29 312
解决vue项目刷新页面出现空白页问题。
vue-router4刷新页面是空白
qq_33759361的博客
09-19 1460
因为我们刷新页面的时候，还是在之前页面，就不会触发新的导航，所以就不会显示。不使用next使用router.push（）方法。
vue无白屏刷新
兔子的博客
02-08 620
在App.vue文件中添加provide ，isRouterAlive。在需要刷新的页面添加inject: [“reload”], <template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', provide ()
基于vue 动态菜单 刷新空白问题的解决
10-14
动态注入路由时，有时会出现白屏现象，只有在刷新页面后才显示。这通常是由于在路由守卫中动态获取并注入路由导致的。解决方案是在用户登录后立即执行动态添加路由的代码，如下所示： ```javascript // 获取用户...
vue项目打包后打开页面空白解决办法
08-27
Vue 项目打包后打开页面空白解决办法 在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。 一、路径问题 在 Vue 项目中，index.html 文件中的内容都是通过 script ...
vue项目刷新当前页面的三种方法
10-17
首先，传统的刷新页面的方式是使用JavaScript的location对象的reload方法或者Vue Router的go方法。具体来说，location.reload() 和 this.$router.go(0) 这两种方法都可以实现页面的刷新。然而，这种方法的缺点是会...
VUE 解决mode为history页面为空白的问题
10-16
然而，启用这一模式后，可能会遇到刷新页面时内容空白的问题，这是因为浏览器在尝试加载实际服务器上不存在的URL资源。以下将详细解释这个问题及其解决方案。 **问题分析：** 当使用`mode: 'history'`时，Vue ...
vue项目出现页面空白的解决方案
12-13
今天新建项目，然后发现路由也改了  app.vue里面也是啥都没有， 但是访问http://localhost:8080/#/login  能访问  里面确实空白的 错误： 错误原因： path: ‘/’   只能有1个 整个项目只能有一个【但是我有了2个】，然后我要重定向到login页面，我path又没配置好。 导致页面啥都出不来。 解决办法如下： 以上这篇vue项目出现页面空白的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue项目强制刷新当前页面无空白
qq_30351747的博客
05-20 782
简述 在vue项目开发过程中，有的时候数据不好清空，加载不及时，需要页面做一个强制的刷新，来实现数据及时更新的效果。 方法一 js强制刷新，不推荐使用，因为这种方式虽然可以最简单粗暴的实现效果，但是刷新的时候会有一个空白的间隔期，用户体验不好，所以不推荐使用。 虽然不推荐使用，但是方法还是要交代的。 在需要的地方直接加入这行代码就OK了：window.location.reload(); 我是用来解决cookies数据及时存放获取问题的，效果实现，体验不好 // cityCode 持久化 import Co
vue刷新当前页面不出现白屏的方法
weixin_69318049的博客
10-12 1409
vue 刷新页面，不会出现白屏
vue动态路由，刷新页面出现空白的问题
weixin_57503174的博客
06-25 3513
在router/index.js中导入store，然后通过commit执行store中的activeRouter方法，进行重新动态添加路由的操作。当我们在编写动态路由时，常常会遇到第一次进入页面时可以正常展示，但是一旦。，不管是store中储存的数据亦或是动态添加路由的步骤都会丢失。因此要解决这个问题，我们必须在刷新页面之后。出现这种现象的问题是因为当页面刷新时，刷新页面就会空白不显示。重新执行动态添加路由。
vue界面怎么实现刷新不显示空白页面
欧阳惜竹的博客
12-10 1969
文章目录 有时在设计实现过程中，我们需要刷新整个页面，但是一般的刷新会出现空白页面，然后显示正常页面，导致页面很难看，在vue中，我们使用 this.$router.go(0) 和 location.reload() 它们会使页面出现空白，最后找到了一个方法，可以实现刷新页面功能，且使页面不出现空白，代码如下： this.isRouterAlive = false this.$nextTick(function () { this.isRouterAlive = true }) 利用控制的显示隐藏来实现
vue动态路由，刷新页面空白问题
wxl1390的博客
04-09 1579
了，所以每次渲染页面的时候都要重新执行一下添加动态路由的方法。第一次进入页面会正常显示，但是点击刷新页面后会导致页面空白。在vue项目中采用动态添加路由的方式，
vue中刷新页面-页面不留白刷新法-reload
IT_Dilraba_bin的博客
05-09 430
vue中刷新页面-页面不留白刷新法-reload
vite vue3 vue-router 动态加载菜单，解决浏览器刷新后界面空白问题
dugucike的专栏
04-19 2311
app.use(store) //再加载store,vuex中的store刷新后清空，否则把菜单放store里面也可以，如果使用vuex持久化插件，router和store的加载顺序得改过来。//进入路由守卫生再加载一次，因为路由间的转向不整体刷新网页，不执行上面的全新加载函数，比如，登陆前，本地前没有存放菜单数据，登陆后还未执行菜单数据拉取，这时候菜单可能为空。//加载菜单,验证是否登陆，登陆则发送加载菜单请求，否则不发送。//如刷新，重新从localstorage加载菜单。//从本地菜单数据加载菜单。
vue页面刷新空白解决办法
09-19
如果Vue页面刷新后出现空白的情况，可能是因为Vue路由导致页面组件没有正确加载。解决这个问题的办法有以下几个方面： 1. 检查路由配置：查看Vue的路由配置文件，确保每个路由已正确定义并指定了对应的组件。确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值