vue页面刷新，样式部分乱的情况 解决办法

最新推荐文章于 2024-05-21 11:04:24 发布
最新推荐文章于 2024-05-21 11:04:24 发布
阅读量4k 收藏
点赞数 2
分类专栏： Vue 文章标签： vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lifangfang0607/article/details/103068019
版权

vue首次进入页面完好，当刷新时页面样式乱的情况：

vue-router 使用了history 模式，默认 “/” 根目录下找文件，此时index.html中的静态资源"./“引入的，则未加载进来，修改为”/"即可。

使用dbms_refresh.refresh刷新refresh_method为force的物化视图无效
weixin_33832340的博客
09-02 2132
SQL> select owner,mview_name,LAST_REFRESH_DATE,STALENESS,MASTER_LINK,REFRESH_MODE,REFRESH_METHOD from all_mviews; OWNER MVIEW_NAME LAST_REFRESH_DATE STALENESS MASTE...
通过vue刷新左侧菜单栏操作
10-14
Vue Router是Vue.js官方推荐的路由管理库，它允许我们定义和管理应用的路由，从而实现页面的无刷新跳转和菜单的动态更新。在这个场景中，我们将深入探讨如何通过Vue Router来实现左侧菜单栏的刷新操作。 首先，我们...
Vue页面偶现样式错乱问题刷新就又好了解决思路
梓隽的博客
03-22 1万+
遇到这个挺有趣的问题，就花时间整理下解决思路，希望能帮助到别人 问题 前端框架vue，某页面在首次进入时样式错乱，刷新后就好了，并且是偶现的。 解决思路 第一步 首先**排查css是否是样式问题 **，比如宽度的百分比设置有问题（上述问题是这个原因的可能不大） 第二步 在排查完样式没问题之后，就从页面加载顺序开始排查，一般页面都是先加载<head>然后再加载dom页面<body>,CSS跟DOM是同步加载的，但是如果引用外部样式或者脚本的话就会使异步加载，而我们大部分页面CSS都.
Vue在刷新后引用的样式无效
nnni
09-03 2957
引 在写自己博客的时候，在文章页面需要用到页面样式的引入渲染，使用了 showdown 和 highlight.js 当第一次打开页面的时候样式一切正常，如果刷新页面所有引用的样式会被取消，再跳转其他页面，样式同样失效。 但是只是在其他页面，引用的 font-awasome 的样式却没问题，问题可能出在单纯的js引用后导致全部文件的失效。 项目使用的vue-router 是 history 模式下...
VUE页面路由跳转后，出现样式混乱，刷新后恢复正常的3个解决方法
2302_76297935的博客
03-09 3663
vue页面路由跳转，出现样式混乱，但是刷新后就恢复正常，别急我这有三个解决方法
Vue页面偶尔样式错乱，刷新即恢复
hupei
04-21 4325
vue项目样式偶尔错乱崩溃，如下图一，当刷新该页面后又恢复正常，见图二。 图一： 图二： 解决办法： 1、style样式加 scoped (最通用的办法) 2、网络不稳定等情况 3、尽量不使用float,如果在你偶尔错乱的样式里发现了float,试着删掉该属性后再看看 ...
vue 返回上一页,页面样式错乱的解决
10-15
在使用Vue.js框架进行单页面应用开发过程中，经常会出现返回上一页后页面样式错乱的情况。这通常是因为在多个页面中使用了相同的类或ID，导致Vue组件在切换时，新页面的样式与旧页面的样式发生冲突，从而导致样式...
解决Vue打包上线之后部分CSS不生效的问题
12-13
在Vue项目中，当应用被打包并部署到生产环境时，有时会遇到部分CSS样式不生效的问题。这可能由多种原因引起，包括但不限于CSS模块化处理、CSS压缩、SourceMap配置错误等。针对这种情况，我们可以采取一些策略来解决...
Vue 路由切换时页面内容没有重新加载的解决方法
10-18
在使用Vue.js开发单页应用程序（SPA）时，页面组件在路由切换时通常会重新渲染以显示新的内容。但有时候，用户可能会遇到路由切换时页面内容没有更新的问题。这通常与Vue的生命周期钩子函数和keep-alive组件使用不当...
vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量）
08-27
"Vue 中 v-cloak 解决刷新或者加载出现闪烁问题（显示变量）" 在 Vue 中，使用 v-cloak 指令可以解决刷新或者加载出现闪烁问题（显示变量）。当我们使用 Vue 绑定数据时，在渲染页面时会出现变量闪烁，例如 `...
Vue页面加载样式出错解决办法
m0_64597784的博客
06-16 732
使用Vue编写页面的时候，当第一次打开页面时候部分样式出错，刷新一次即可恢复正常。
vue路由跳转后页面样式错乱，刷新一下又好了的问题
一如年少丶的博客
05-04 1万+
前言 如图所示，当我从profile页跳转回index页时，页面样式错乱： 这是index页面一开始的样子，然后我们跳转到profile页面 这是profile页面，然后我们再跳转回index页面 这个时候问题就来了，可以明显的看到首页的样式被破坏了，那么为什么会这样呢？ 思考 想了一下意识到，大概率是因为vue加载组件的时候，会把所有组件的css全部加载到一起，而这个时候样式是全局的，vu...
关于Vue页面css样式错乱—初次加载页面排版正常但偶尔刷新页面却出现样式错乱的问题
这里是ShareJasmine的博客~
05-21 960
关于Vue页面css样式错乱—初次加载页面排版正常但偶尔刷新页面却出现样式错乱的问题。自己在写一个Vue项目时发现一切功能都正常，控制台也没有报错。第一次打开页面时，css样式成功渲染，但是再次刷新页面时偶尔会出现样式错乱的问题。我打开console—network—查看css那一栏，突然发现有时引入的css文件会报404错误。
关于新手入坑vue，页面跳转样式错位刷新又好了的情况
Emperor灬fly的博客
09-15 1万+
       在项目开始的时候，一股脑的热情把所有的代码都码好了，然后就开始测试各模块的功能。在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。于是就打开浏览器查看在页面跳转时样式的变化，我发现有些页面，在跳转时页面的样式并没有加载，而是沿用了前一个页面的，或者前面已经加载过页面的样式。一开始觉得很奇怪，后来想了想，这是个单页面应用。是不是样式的id 或者 class ...
vue 路由跳转，导致页面样式错乱，刷新又好了的情况
热门推荐
魏晋-
03-05 1万+
在项目开始的时候，把所有的代码都码好。在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。而且我在每个组件页面里面写的公共样式css，都删除掉scoped,这种情况下，跳转后页面的样式会沿用了前一个页面的样式，导致页面错乱。 解决办法:在跳转前和跳转后页面的style上加上scoped，把公共样式写到分别写到子组件就OK了 <style scoped&...
rem使用后页面布局瞬间错乱的问题
xin00guang的博客
08-31 4080
  问题: 移动端项目中使用了rem.js, 里面的加载项为'load', 如果网络情况非常慢, 页面资源(如图片,视频)非常大,  就会造成rem.js暂时无效,  页面会瞬间没有样式. 因为此时,html的font-size并没有被改变, 1rem = 16px .   解决: 1.  在css中提前设置fon-size的大小 2. 将rem中执行的load换为DOMCon...
iframe嵌入后，刷新页面导致视图污染
weixin_45717984的博客
11-10 458
那么在页面第一次渲染时记录src参数，用localStorage存储，在组件初始化的时候将iframe用document.appedChild加到body里面，那么每次页面刷新都会有新的iframe，然后再将src参数赋值。当前项目需要使用grafana图表展示，在调研grafana后发现可以直接用iframe渲染grafana生成的url参数，但是这个iframe不是用新页面打开，而是当成一个组件一样嵌入在父盒子中；这是我的解决方案，当然如果有其它方案可以告知，不断学习。
vue2解决刷新页面时，导航栏样式active错乱的问题
Maybe_ss的博客
12-31 1378
router.js路由显示: html： 将循环中的一个字段是与路由中的某个字段对应上。我这里直接选择的是地址path。 设置:class="{active:$route.path === item.menuUrl}" 不用在li标签上设置点击事件，就可以控制导航active样式；不管是页面内按钮跳转还是页面刷新，active样式永不失效。 ...
vue页面跳转之后，之前页面的样式错乱，刷新之后又恢复正常。解决方法
changyana的博客
10-12 5552
这是css引用错乱导致的，也就是本页面被自动使用了其它页面的css样式。为了防止这种错乱产生，需要给每个页面加上scoped，表示此css样式只在本页面进行使用。
如何让vue3跳转页面自动刷新
最新发布
05-15
### Vue3 实现页面跳转后自动刷新的方法 在 Vue3 中，可以通过多种方式实现页面跳转后的自动刷新功能。以下是几种常见的解决方案： #### 方法一：利用 `watch` 监听 `$route` 变化 通过监听路由的变化，在检测到新路由加载完成后触发刷新逻辑。 ```javascript import { watch } from &#39;vue&#39;; import { useRoute } from &#39;vue-router&#39;; export default { setup() { const route = useRoute(); watch( () => route.fullPath, (newPath) => { console.log(&#39;路由已更新:&#39;, newPath); // 执行刷新操作 window.location.reload(); } ); }, }; ``` 这种方法适用于任何路由变化场景，并能确保每次路由改变时都执行特定的逻辑[^1]。 --- #### 方法二：通过查询参数控制刷新行为 可以在跳转时附加一个特殊的查询参数来标记是否需要刷新当前页面。目标页面接收到此参数后决定是否执行刷新动作。 ##### 跳转代码： ```javascript this.$router.push({ path: &#39;/target-page&#39;, query: { refresh: true }, // 添加 refresh 参数 }); ``` ##### 接收并处理刷新请求： ```javascript import { onMounted, ref, watchEffect } from &#39;vue&#39;; import { useRoute } from &#39;vue-router&#39;; export default { setup() { const route = useRoute(); const shouldRefresh = ref(false); watchEffect(() => { if (route.query.refresh === &#39;true&#39;) { shouldRefresh.value = true; } }); onMounted(() => { if (shouldRefresh.value) { location.reload(); // 刷新整个页面 } }); }, }; ``` 这种方式更加灵活，允许开发者针对不同情况定制不同的刷新策略[^3]。 --- #### 方法三：重写路由跳转逻辑模拟刷新 如果希望完全避免实际意义上的页面刷新（即减少用户体验上的中断），可以采用虚拟刷新技术——先销毁再重建组件实例。 ##### 修改路由配置文件 (`router/index.js`)： ```javascript const router = createRouter({ history: createWebHistory(), routes: [ { path: &#39;/example&#39;, name: &#39;ExamplePage&#39;, component: ExampleComponent, meta: { reloadable: true }, // 设置可刷新标志 }, ], }); // 全局前置守卫 router.beforeEach((to, from, next) => { if (to.meta?.reloadable && to.fullPath !== from.fullPath) { document.body.classList.add(&#39;page-reloading&#39;); // 自定义样式过渡效果 setTimeout(() => { document.body.classList.remove(&#39;page-reloading&#39;); next(vm => vm?.$forceUpdate()); // 强制视图更新 }, 0); // 延迟执行以完成动画渲染 } else { next(); } }); ``` 这种方案适合追求极致性能优化的应用程序，因为它不会真正触碰浏览器的历史记录栈[^2]。 --- #### 方法四：借助生命周期钩子函数 对于某些特殊业务需求而言，可能只需要局部区域的数据重新拉取而非整体 DOM 的重构，则可以直接依赖于组件自身的生命周期回调机制。 例如，在进入某个具体页面之前预先获取所需资源： ```javascript <script> import { defineComponent } from &#39;vue&#39;; export default defineComponent({ async beforeRouteEnter(to, from, next) { try { await fetch(&#39;/api/data&#39;).then(response => response.json()); next(vm => { vm.setData(...fetchedData); // 更新内部状态 }); } catch (error) { console.error(error.message || error.toString()); next(false); // 阻止导航继续进行 } }, methods: { setData(data) { this.localState = data; // 将服务器返回的结果赋给本地变量 }, }, }); </script> ``` 尽管如此，需要注意的是由于此处处于尚未挂载阶段因而无法直接访问上下文中绑定的对象属性值[^3]。 --- ### 性能考量与注意事项 无论采取哪种手段都需要权衡利弊，比如频繁调用 `window.location.reload()` 不仅会增加网络负担还可能导致 SEO 效果下降等问题；而单纯依靠 JavaScript 动态调整则有可能面临缓存污染风险等等。因此建议根据实际情况合理选用最合适的工具集组合起来解决问题。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值