vue3中所有页面需要手动刷新一下才能显示，控制台没有报错

于 2024-04-23 14:53:45 发布
阅读量362 收藏
点赞数 1
分类专栏： vue3 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75509848/article/details/138125539
版权

1.问题

登录进来是进入首页，然后切换任何页面都是空白，但是控制台没有报错。在其他页面刷新后却能显示，然而切换到首页刷新后再切换到其他页面又是空白。

2.解决问题

原因：在于首页给了两个根标签，我把其中一个根标签直接v-if="false"了

所以即使vue3能使用多个根标签但还是最好不要使用多个根标签，总会有一些意想不到的问题出现

℘团子এ
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
10-17
主要介绍了解决VUE在封装了Axios后手动刷新页面拦截器无效的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
解决Vue 刷新页面导航显示高亮位置不对问题
10-15
主要介绍了解决Vue 刷新页面导航显示高亮位置不对问题,本文图文实例相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue3项目路由跳转成功，但是页面空白，刷新一下才能显示（已解决）
JHGYLD7的博客
07-30 2499
原链接：(23条消息) vue 路由跳转页面不刷新_vue路由跳转页面不刷新_咬着拽天下的程序猿的博客-CSDN博客困扰我整整一天的问题就这么解决了，谢谢
Vue3切换路由白屏刷新后才显示页面内容
weixin_53339757的博客
10-02 2477
Vue3切换路由白屏刷新后才显示页面内容
vue3 路由跳转之后为空白页面，刷新之后就好了的bug
最新发布
weixin_43499845的博客
03-08 543
找到 router-view 之后 ，加上 :key="$route.fullPath"
vue项目遇到的问题---登陆后跳转到首页没有获取到数据，手动刷新才可以
weixin_51938803的博客
05-09 1624
一、我做的项目是这样的，首先进入的页面是layout页面,然后再重定向到子页面home首页中，因为要判断用户是否登录，所以在前置路由守卫那里做了判断，如果未登录，则强行跳转到我的页面中进行登录，然后就出现了问题，登录成功后跳转到首页的时候，数据没有获取到，但刷新的时候就有了。因为在第一次进入首页的时候，home页面的created已经执行了一次，再次通过登录进来的话created就不会执行，如果手动刷新的话，created会重新执行，所以会获取到数据。
vue3切换页面后刷新才能显示的问题
qq_34559237的博客
06-21 6504
在网上搜了很多解决方案都不能解决,在这里记录一下自己的问题 原因:是由于缺少一个根标签导致的 Component inside <Transition> renders non-element root node that cannot be animated. at <Test onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< ...
vue3页面跳转产生白屏，刷新后能正常展示的解决方案
weixin_45288172的博客
02-01 1753
vue3页面跳转产生白屏，刷新后能正常展示的解决方案
解决vue打包后刷新页面报错：Unexpected token <
10-16
主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。
vue在App.vue文件中监听路由变化刷新页面操作
10-14
主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue页面刷新记住页面状态的实现
10-15
主要介绍了Vue页面刷新记住页面状态的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决VUE项目更新后需要客户手动刷新浏览器 和发版之后页面出现白屏的问题
w807139809的博客
01-25 715
解决VUE项目更新后需要客户手动刷新浏览器 和发版之后页面出现白屏的问题
解决vue前端发版后要刷新才能看到更新的问题
weixin_48398799的博客
11-28 4300
vue前端发版后要刷新才能看到更新
VUE项目更新后需要客户手动刷新浏览器问题
wen_rou11的博客
03-16 1120
VUE项目更新后需要客户手动刷新浏览器问题
由于浏览器有缓存机制，vue前端打包部署到服务器后，必须手动刷新浏览器才能加载新的修改。如何配置前端自动加载最新的修改
weixin_45930427的博客
05-10 2289
在打包生成后跳转连接的时候判断 version 版本,从而看是否刷新整个页面,源码如下。可以创建一个静态文件 version.json。在生成的时候重新生成 version.json。
vue项目切换页面会白屏，刷新之后才会正常显示(已解决)
精通前端技术，了解后端接口
04-07 3773
vue项目切换页面会白屏，刷新之后才会正常显示(已解决)
vue3页面刷新
cpsxn的博客
06-08 8063
整理工作中用到的页面刷新方式： 1.provide/inject 2.router.go(0) 3.provide,inject控制的显示隐藏 默认 isRouterAlive是true，在需要刷新的时候把这个值设为false，接着再重新设为true。搭配provide和inject使用，不会使页面出现短暂的空白，体验效果比较好 App.vue 需要刷新的组件： 二、router.go(0) 利用了history中前进、后退的功能，传入0来刷新当前页面。相当于F5键刷新 刷新时页面会有一段时间的白屏。 三
vue发版后需要手动刷新页面
qq_39842563的博客
10-14 1217
vue发版后出现“Uncaught SyntaxError:Unexpected token ＜“ 报错。因为每次更新代码到线上都会删除旧的dist文价夹,将最新的dist文件夹copy上传到服务器经行替换，此时hash值已改变。在更新代码的这个过程用户停留在页面上,如果用户在更新完后重新操作就会导致报错，实际上是找不到旧版的文件。
解决vue后台请求的数据，需要手动刷新页面才能显示
过分安静博客
08-01 9729
解决vue后台请求的数据，需要手动刷新页面才能显示
vue3 pinia页面刷新报错
01-18
在Vue 3中使用Pinia进行状态管理时，如果在页面刷新时出现报错，可能是因为Pinia的状态没有正确地进行持久化。为了解决这个问题，你可以使用插件来实现状态的持久化。 一种常见的解决方案是使用`vue-router`和`vuex-persistedstate`插件。下面是一个示例： 1. 首先，安装所需的依赖： ```shell npm install vue-router vuex-persistedstate ``` 2. 在你的Vue项目中，创建一个`plugins`文件夹，并在其中创建一个名为`persistedstate.js`的文件。 3. 在`persistedstate.js`文件中，添加以下代码： ```javascript import createPersistedState from 'vuex-persistedstate'; export default ({ store }) => { createPersistedState({ key: 'your-key', // 设置一个唯一的键名 storage: window.sessionStorage, // 使用sessionStorage进行状态持久化 })(store); }; ``` 4. 在你的Vue项目的入口文件（通常是`main.js`）中，添加以下代码： ```javascript import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; import persistedstate from './plugins/persistedstate'; const app = createApp(App); const pinia = createPinia(); app.use(pinia); app.use(router); // 如果你使用了vue-router，请确保已经导入了router app.use(persistedstate); // 使用插件进行状态持久化 app.mount('#app'); ``` 通过以上步骤，你可以在Vue 3中使用Pinia进行状态管理，并且在页面刷新时不会出现报错。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值