如何在vue-cli webpack模板中创建多Vue实例并实现页面样式隔离？

嘿，我来帮你搞定这个样式泄漏的问题！首先明确告诉你：完全不需要创建多个Vue实例，单Vue实例就能完美解决这个需求，多实例反而会给路由和状态管理带来不必要的麻烦。

针对你用的vue-cli webpack模板，我给你两种实用的解决方案：

方案一：利用路由导航守卫动态加载/卸载样式 #

你可以在路由配置里，给每个路由添加进入和离开的钩子，动态创建或移除对应的CSS样式标签，这样切换页面时旧的样式会被自动清理，不会污染其他页面。

修改你的路由配置如下：

export default new Router({
  routes: [
    { path: '/', redirect: '/foo' },
    { 
      path: '/foo', 
      name: 'fc', 
      component: FooComponent,
      // 进入/foo时加载Bulma
      beforeEnter: (to, from, next) => {
        const bulmaLink = document.createElement('link')
        bulmaLink.id = 'bulma-style'
        bulmaLink.rel = 'stylesheet'
        // 利用webpack的require加载资源，路径根据你的实际安装位置调整
        bulmaLink.href = require('bulma/css/bulma.css')
        document.head.appendChild(bulmaLink)
        next()
      },
      // 离开/foo时移除Bulma
      beforeLeave: (to, from, next) => {
        const bulmaLink = document.getElementById('bulma-style')
        if (bulmaLink) document.head.removeChild(bulmaLink)
        next()
      }
    },
    { 
      path: '/bar', 
      name: 'bc', 
      component: BarComponent,
      // 进入/bar时加载Bootstrap（如果需要）
      beforeEnter: (to, from, next) => {
        const bootstrapLink = document.createElement('link')
        bootstrapLink.id = 'bootstrap-style'
        bootstrapLink.rel = 'stylesheet'
        bootstrapLink.href = require('bootstrap/dist/css/bootstrap.min.css')
        document.head.appendChild(bootstrapLink)
        next()
      },
      // 离开/bar时移除Bootstrap
      beforeLeave: (to, from, next) => {
        const bootstrapLink = document.getElementById('bootstrap-style')
        if (bootstrapLink) document.head.removeChild(bootstrapLink)
        next()
      }
    }
  ]
})

方案二：在组件生命周期钩子中处理样式 #

如果你更倾向于把样式逻辑和组件绑定在一起，可以在组件的mounted钩子中加载样式，在beforeDestroy钩子中卸载样式：

比如你的FooComponent：

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

<script>
import baz from '@/components/baz'

export default {
  components: { baz },
  mounted() {
    // 加载Bulma
    const bulmaLink = document.createElement('link')
    bulmaLink.id = 'bulma-style'
    bulmaLink.rel = 'stylesheet'
    bulmaLink.href = require('bulma/css/bulma.css')
    document.head.appendChild(bulmaLink)
  },
  beforeDestroy() {
    // 卸载Bulma
    const bulmaLink = document.getElementById('bulma-style')
    if (bulmaLink) document.head.removeChild(bulmaLink)
  }
}
</script>

BarComponent可以同理配置Bootstrap的加载/卸载，或者完全不加载任何框架样式，按需调整即可。

额外提示 #

• 如果你想用webpack的动态导入语法（import()）来加载样式，也是可以的，比如import('bulma/css/bulma.css')，不过卸载时还是需要找到对应的样式标签移除，因为动态导入的全局样式会被webpack插入到页面中。
• vue-cli的webpack模板默认已经配置了css-loader和style-loader，所以直接用require或者动态导入都能正确处理CSS资源。
• 路由部分完全不需要改动实例，原来的单Vue实例路由配置就能正常工作，因为我们只是在路由切换时动态操作样式标签，并没有改变应用的实例结构。

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