vue页面组件css不生效，需要刷新才能正常显示页面的问题

最新推荐文章于 2024-06-02 11:57:47 发布
最新推荐文章于 2024-06-02 11:57:47 发布
阅读量7.8k 收藏 9
点赞数 2
文章标签： js vue.js css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ThatDawn/article/details/121673357
版权

分享一下vue开发过程中遇到的一个小问题
vue页面在跳转时发现跳转的页面组件位置大小都不正确，css没有生效，但是刷新了页面之后页面的组件位置又正确了。
如图
在这里插入图片描述
这是一个在线商城系统的主页面跳转至具体商品详情页面时，发现页面组件的css没有正常加载，但是刷新页面之后可以正常显示。检查该页面的代码，已经在created函数中调用了定义this.reload()方法但是仍然不能正常显示。

查询资料知道是因为每个vue文件都有自己对应的css样式。
因此需要在每个页面的style标签上加上scoped属性以表示它的样式仅对于当前页面生效。否则在从别的页面回退或跳转时因为相同的class 样式而导致冲突
在这里插入图片描述
添加scoped标签之后，跳转时页面组件能直接正常显示，问题解决
在这里插入图片描述

ThatDawn
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue 页面闪烁的问题_vue页面加载闪烁问题的解决方法
weixin_42407617的博客
12-31 2783
v-if 和 v-show 的区别v-if只会在满足条件时才会编译，而v-show不管是否满足条件始终会编译，v-show的显示与隐藏只是简单的切换CSS的display属性。也就是说，在使用v-if时，若值为false，那么页面将不会有这个html标签生成。而v-show：不论其值是false还是true，html元素都会存在，只是简单的切换css的display属性。使用场景一般来说，v-if...
vue开发单页面应用容易遇到的问题：某些css在切换路径时不加载
weixin_58487208的博客
04-25 758
最近被css问题坑到了，element 的 table 表格中的某些样式或者伪元素在切换路径之后不重新加载了，本来想试试用刷新页面来解决，但是太影响用户体验。 不过大部分地方都还是能正常显示，该挂载的元素还是能挂载。我猜测可能是由于这个项目大部分<style>标记内没有用scoped来防止样式污染问题，但是我在自己的代码里面加了都没用，包括::v-deep也试了。因为这个毕竟是elementui的table表格，需要样式穿透来改变。 处理过程： 第一步：伪元素更换成img标签防止后续不加载
vue-cli设置css不生效的解决方法
10-15
主要介绍了vue-cli设置css不生效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue页面跳转后样式变更，刷新可恢复
weixin_45915769的博客
02-13 1084
这个问题出现在A页面，多次测试之后发现，从C/D/E等页面跳转到A页面均不会出现此情况，只有从B页面跳转到A页面的时候会出现。于是乎观察了A/B页面的标签及格式。今天被师傅cue到一个小问题，说user在使用系统时有时会出现标签样式变窄，无法输入需要刷新才能恢复的情况。（可以通过查看A页面中错乱的元素 看B页面中是否也有此元素）原因：B页面中的CSS样式作用到了A页面中的对应元素。解决方式：A、B页面的CSS样式都加上。（表示仅作用于当前页面）
Vue样式不生效，如何解决？
最新发布
FENGZXCjjjjj的博客
06-02 455
:v-deep 在预处理器 scss 、sass、less 比较通用 如果使用了预处理器都可以使用 ::v-deep。在Vue项目中，经常需要使用如elementUI、vant、 iview等组件库，都可能自定义一些样式文件，但是有些样式直接在组件中修改无效，因为scoped局限于当前组件，去掉scoped的话又会影响全局样式。如果使用了scoped后,无法修改第三方UI组件库组件的样式，这里可以使用css深度作用选择器，以作样式修改。如果项目使用的是css 原生样式,那么你可以直接使用 穿透修改即可。
Vue打包后，页面样式出现混乱，刷新即可恢复正常
蓝胖子的博客
02-01 805
Vue打包后，页面样式出现混乱，刷新即可恢复正常
Vue路由页面跳转CSS残留问题解决
qq_56111476的博客
10-13 1109
Vue路由页面跳转CSS残留问题解决
vue3修改样式后，页面刷新后依旧无变化
朱远辉的博客
04-19 701
vue3修改样式后，页面刷新后依旧无变化
页面跳转后elementUI的table组件样式不加载，需要再次刷新页面
qian_li_hui的博客
05-25 1028
页面跳转后elementUI的table组件样式不加载，需要再次刷新页面 将跳转前后的页面中的style 中加上scoped <styel scoped>...<style>
页面需要刷新才能出来想要的页面样式（scoped详解）
iFfy的博客
06-16 929
当 标签带有 scopedattribute 的时候，它的 CSS 只会影响当前组件的元素，和 Shadow DOM 中的样式封装类似。使用时有一些注意事项，不过好处是不需要任何的 polyfill。
解决vue中无法动态修改jqgrid组件 url地址的问题
08-27
然而，对于像jqGrid这样的外部库，它们可能没有集成Vue的数据绑定机制，因此直接修改Vue实例的数据并不能触发jqGrid内部的重新加载或刷新。 在描述中提到的解决方案中，我们可以看到，通过使用jqGrid提供的API来...
vue项目创建并引入饿了么elementUI组件的步骤
12-09
为了测试Element UI是否正常工作，你可以在`src/components`目录下创建一个新的Vue组件，比如`TestElement.vue`。在组件模板中，你可以使用Element UI的组件，例如`<el-row>`和`<el-col>`来创建栅格布局。记得在样式...
Vue 解决父组件跳转子路由后当前导航active样式消失问题
11-20
此外，问题中还提到了在Element-UI的`el-menu`组件中遇到的类似问题，即在刷新页面后，`default-active`属性与当前路由页面不一致。解决这个问题的方法是将`default-active`属性绑定到Vue Router的`$route.path`： ...
ant-design-vue按需加载的坑的解决
11-20
这是因为Ant Design Vue的一些less文件可能包含JavaScript表达式，这些表达式在新版本的Less中需要`javascriptEnabled`设为`true`才能正确解析。 解决这个问题的方法有两种： **方法一** 是在项目的`vue.config.js...
不用刷新开发页面
03-07
例如，使用Webpack或Parcel等现代构建工具时，HMR功能可以让CSS、JavaScript或者React组件等模块在修改后即时生效，而不会丢失当前页面的状态，如用户输入或滚动位置。这样，开发者可以在调整UI或修复问题时节省大量...
Vue使用 AOS库 只有当页面刷新或首次加载时工作，不妨试试animate.css库
weixin_43814775的博客
05-31 536
Vue使用 AOS库 只有当页面刷新或首次加载时工作，不妨试试animate.css库
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
首先，Vue组件的核心是模板，这里我们看到一个`template`部分，包含两个主要元素：一个`ul`列表作为tab导航，另一个`div`作为内容展示区域。每个`li`元素代表一个tab，通过`@click`事件监听用户的点击，并用`:class`...
vue设置默认组件显示，并且页面刷新后默认组件页面不变
05-31
在 Vue 中设置默认组件显示可以通过路由配置文件中的默认路由来实现，并且可以使用 `keep-alive` 组件来保持页面刷新后默认组件页面不变。 1. 在路由配置文件中定义默认路由，指向需要显示的默认组件。 ```javascript { path: '/', redirect: '/home' }, { path: '/home', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ``` 2. 在 App.vue 组件中，使用 `router-view` 组件来显示路由组件，并使用 `keep-alive` 组件来缓存路由组件，以保持页面刷新后默认组件页面不变。 ```html <template> <div> <header> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> </header> <keep-alive> <router-view /> </keep-alive> </div> </template> <script> export default { name: 'App' }; </script> ``` 这样，当用户访问根路径时，会默认跳转到 `/home` 路径，显示默认组件 `Home`，并且在页面刷新后仍然显示默认组件页面，因为使用了 `keep-alive` 组件来缓存路由组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ThatDawn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值