如何使这些限定作用域的样式仅在3个页面中可重用，而不影响Vue.js中的其他页面

在Vue.js中，可以使用作用域样式和组件化的方式来实现限定作用域的样式仅在特定页面中可重用，而不影响其他页面。

一种常见的做法是使用Vue的单文件组件（.vue文件），将每个页面封装为一个独立的组件。在组件的样式部分，可以使用CSS预处理器（如Sass、Less）来编写样式，并通过给样式添加唯一的类名或选择器来限定作用域。

以下是一个示例的单文件组件的代码结构：

<template>
  <!-- 页面的HTML模板 -->
</template>

<script>
export default {
  // 页面的逻辑部分
}
</script>

<style scoped>
/* 页面的样式部分 */
</style>

在上述代码中，通过在<style>标签上添加scoped属性，可以使样式仅在当前组件中生效，不会影响其他组件。

如果需要在多个页面中共享样式，可以将这些样式提取为一个独立的样式文件，并在需要的页面中引入。可以使用CSS预处理器的@import语法或Vue的<style>标签的@import语法来引入样式文件。

例如，可以创建一个名为shared-styles.scss的样式文件，定义一些共享的样式：

/* shared-styles.scss */

.shared-style {
  /* 共享样式的定义 */
}

然后，在需要使用这些共享样式的页面组件中，可以通过以下方式引入并使用：

<template>
  <!-- 页面的HTML模板 -->
</template>

<script>
export default {
  // 页面的逻辑部分
}
</script>

<style scoped lang="scss">
@import 'path/to/shared-styles.scss';

/* 使用共享样式 */
.page-specific-style {
  /* 页面特定样式的定义 */
}

.page-specific-style .shared-style {
  /* 页面特定样式与共享样式的组合使用 */
}
</style>

在上述代码中，通过@import语法引入了shared-styles.scss文件，并在<style>标签中使用了.shared-style类名来应用共享样式。同时，也可以在<style>标签中定义页面特定的样式，如.page-specific-style类名。

需要注意的是，为了使@import语法生效，需要根据实际情况配置构建工具（如Webpack、Vue CLI）的样式加载器。

推荐的腾讯云相关产品和产品介绍链接地址：