Vue SPA适配问题：如何移除已卸载组件的残留样式？

你这个问题我在把传统Vue项目改造成SPA的时候也碰到过！组件卸载了但样式还留在DOM里，切换路由的时候新旧样式互相干扰，确实头疼。既然你不想动现有样式代码，那你想到的「组件挂载时加载样式、卸载时移除样式」的思路完全可行，我给你两个具体的实现方案，都是不需要修改原有样式的：

核心就是把组件的样式和组件的生命周期绑定，组件活的时候样式生效，组件销毁了样式也跟着走。

方法一：手动创建/移除style标签（适合单个独立样式文件） #

在你的Unused组件里，利用Vue的生命周期钩子来操作DOM：

<template>
  <!-- 你的组件内容 -->
</template>

<script>
export default {
  data() {
    return {
      // 存一下创建的style标签，方便后面移除
      styleTag: null
    }
  },
  mounted() {
    // 创建一个新的style标签
    this.styleTag = document.createElement('style')
    // 加载组件对应的样式文件，这里路径要根据你项目实际结构调整
    fetch(require('@/components/Unused/style.css'))
      .then(res => res.text())
      .then(cssContent => {
        // 把样式内容塞进style标签，再加到页面head里
        this.styleTag.textContent = cssContent
        document.head.appendChild(this.styleTag)
      })
  },
  unmounted() {
    // 组件卸载时，把对应的style标签从DOM里删掉
    if (this.styleTag && this.styleTag.parentNode) {
      this.styleTag.parentNode.removeChild(this.styleTag)
    }
  }
}
</script>

注意：如果你的项目用了webpack或Vite这类打包工具，require的路径要确保能正确指向组件的样式文件，要是路径不对会加载失败哦。

方法二：动态导入样式模块（更优雅，适合模块化项目） #

如果你的项目支持ES模块的动态导入（现在大部分Vue项目都支持），可以用这种方式，打包工具会帮你处理样式加载，你只需要找到对应的标签移除就行：

<template>
  <!-- 你的组件内容 -->
</template>

<script>
export default {
  data() {
    return {
      styleSheet: null
    }
  },
  async mounted() {
    // 动态导入组件样式文件
    const styleModule = await import('@/components/Unused/style.css')
    // 打包后动态导入的样式会有一个带href的属性，用这个找到对应的style标签
    this.styleSheet = document.querySelector(`style[data-href*="${styleModule.href}"]`)
  },
  unmounted() {
    // 卸载时移除样式标签
    if (this.styleSheet && this.styleSheet.parentNode) {
      this.styleSheet.parentNode.removeChild(this.styleSheet)
    }
  }
}
</script>

这种方式比手动fetch更省心，打包工具会自动处理样式的加载逻辑，你只需要精准定位到对应的样式标签就行。

拓展思路（可选） #

如果后续你有时间优化项目，也可以考虑给每个路由页面的根容器加一个唯一的类名，然后把组件样式都嵌套在这个类名下——比如路由/unused对应的页面根元素加class="page-unused"，样式都写在.page-unused {}里面。不过这需要修改现有样式代码，不符合你现在的需求，就当是个未来的优化方向啦。

内容的提问来源于stack exchange，提问作者Alexandr Vysotsky