单页面 后台管理系统 在不用iframe做的动态tabs标签页 在打开多个标签页时子页面之间的样式如何隔离

Question

题目描述

打开多个标签页时,未打开的标签页内容虽然隐藏，但各子页面样式会冲突。经常会在子页面加style标签。

题目来源及自己的思路

以前 不要求作多标签 直接在子页面 加style标签 写样式。每次加载完直接remove掉了，所以不会有影响，现在加了多标签页 样式就会有冲突。
试过 直接 加一个各子页面动态id作为前缀 选择器 可以解决 。但是页面太多，改起来很费时间。想寻求一种简单的解决方案或思路。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

加上scoped,形如：

<style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

参考：Vue.js文档