vue页面组件css不生效，需要刷新才能正常显示页面的问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
分享一下vue开发过程中遇到的一个小问题
vue页面在跳转时发现跳转的页面组件位置大小都不正确，css没有生效，但是刷新了页面之后页面的组件位置又正确了。
如图
这是一个在线商城系统的主页面跳转至具体商品详情页面时，发现页面组件的css没有正常加载，但是刷新页面之后可以正常显示。检查该页面的代码，已经在created函数中调用了定义this.reload()方法但是仍然不能正常显示。
查询资料知道是因为每个vue文件都有自己对应的css样式。
因此需要在每个页面的style标签上加上scoped属性以表示它的样式仅对于当前页面生效。否则在从别的页面回退或跳转时因为相同的class 样式而导致冲突
添加scoped标签之后，跳转时页面组件能直接正常显示，问题解决
GitHub 加速计划 / vu / vue
103
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：1 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)