通过router-link进行路由跳转后，样式出错
来源：10-5 搜索布局及路由跳转（2）
ForCoke
2022-02-09
1.Nearby组件中通过router-link跳转到shop组件，跳转后的界面为：
2.刷新后界面正常：
3.所有的vue组件中，书写style标签的时候，都书写了scoped属性，确保每一个样式只作用于自己的组件，所以麻烦老师看一下，究竟什么问题导致样式的错乱。
//-----------------------------------------------------------------------------------------------------------------------------------------------------------
老师目前的情况是：
1.我检查了所有的组件，发现首页的StaticPart组件，书写样式的时候style标签上未添加scoped样式，有且只有这个组件没有添加，在添加scoped属性后，跳转到Shop组件时，样式恢复正常。
2.但是我不太明白的地方在于，我在Shop组件中添加了scoped属性，这样css选择器在应用的时候，已经是通过属性选择器配合Shop组件的唯一hash来选择样式的，为什么还会出现某些样式未应用的情况。同时我在发现样式未生效的情况后，还通过修改Shop中的各类HTML标签类名的方式，确保类名的唯一，依旧样式未生效。就是StaticPart组件中有.search{…样式}，但是我在Shop组件中.searchWrapper{.search{…样式}}，这样怎么也是能准确选中应用样式的啊。
1回答
-
Dell
2022-02-19
你的意思是外层组件已经设置了 scoped，但是内部组件还是会影响外部对吧，是这样的，在样式方面，不要关注父子组件嵌套关系，只要你没有 scoped，都是会影响外部央视的，你看 vue 生成的源码，不只有 hash，还有一个其他的 class 样式名字，之所以影响，不是因为 hash，而是因为另外一个样式名称。
142022-03-12
相似问题
回答 1
回答 1