vue中如何让每个页面都显示同一个组件

在Vue.js中，如果你想要在一个应用的所有页面上都显示同一个组件，你可以通过创建一个全局组件来实现。这通常在App.vue或者main.js这样的应用入口文件中完成。以下是一个基本步骤：

1. **创建全局组件**：
首先，在`src/components`目录下创建一个你想要复用的组件，比如`SharedComponent.vue`。

<!-- SharedComponent.vue -->
<template>
  <div>这是一个共享组件的内容</div>
</template>

<script>
export default {
  name: 'SharedComponent',
  // ... 其他组件选项，如数据、事件处理等
}
</script>

2. **在`main.js`中注册全局组件**：
在`main.js`中引入这个组件，并在Vue实例的`components`选项中添加它，使其在整个应用中可用。

import Vue from 'vue'
import App from './App.vue'
import SharedComponent from '@/components/SharedComponent.vue'

Vue.component('shared-component', SharedComponent)

new Vue({
  render: h => h(App),
}).$mount('#app')

3. **在每个需要的地方使用该组件**：
现在，你在任何一个需要显示这个共享组件的地方都可以用了，只需要在模板中 `<shared-component>` 标签即可。

例如，在`ChildPage.vue`:

<template>
  <div>
    <h1>这是子页</h1>
    <shared-component></shared-component>
  </div>
</template>