分享一下vue开发过程中遇到的一个小问题
vue页面在跳转时发现跳转的页面组件位置大小都不正确,css没有生效,但是刷新了页面之后页面的组件位置又正确了。
如图
这是一个在线商城系统的主页面跳转至具体商品详情页面时,发现页面组件的css没有正常加载,但是刷新页面之后可以正常显示。检查该页面的代码,已经在created函数中调用了定义this.reload()方法但是仍然不能正常显示。
查询资料知道是因为每个vue文件都有自己对应的css样式。
因此需要在每个页面的style标签上加上scoped属性以表示它的样式仅对于当前页面生效。否则在从别的页面回退或跳转时因为相同的class 样式而导致冲突
添加scoped标签之后,跳转时页面组件能直接正常显示,问题解决