vue3 路由跳转后样式污染

Vue3中，路由跳转可能会导致一些样式污染的问题，通常发生在组件之间存在引用循环或者是全局CSS样式覆盖了局部样式的情况。主要有以下几个原因：

1. 引用循环：如果两个或更多组件相互引用，当其中一个组件在路由切换时被卸载并重用，可能导致其样式被其他组件的样式替换或清除。这被称为“CSS Hot Module Replacement”（HMR）更新期间的样式抖动。

2. 父组件样式影响子组件：全局注册的CSS样式表如果没有明确地限制作用域，可能会无意间影响到所有子组件，包括通过路由跳转显示的组件，导致它们的样式被覆盖。

3. 动态导入和异步组件：对于动态导入的组件，由于它们的样式可能稍晚加载，所以在初始化阶段的样式可能会与实际渲染后的样式冲突。

解决这个问题的一般策略包括：

- 避免引用循环：合理组织组件之间的依赖关系，确保每个组件只关心自身状态。
- 使用`scoped`属性：给CSS选择器添加`scoped`可以限制其仅作用于当前组件内的元素。
- 分开管理全局样式和组件内样式：将公共样式放入单独的文件，并使用`:deep()`伪元素来穿透到嵌套组件的样式。
- 使用`v-if`或`keep-alive`：对于不需要复用的组件，可以用`v-if`指令避免不必要的渲染，或使用`keep-alive`缓存已渲染过的组件以减少样式刷新。