Javascript 如何为每个Vuejs视图创建共享内容？

我正在学习Vuejs并尝试使用他们的API克隆网站

首先，我尝试克隆UI并创建一些基本样式表

我的架构是这样的：

我有组件、路由器和视图，还有App.vue，我在其中放置了带有简单路由器导航的导航栏。同样在App.vue中，我想添加所有内容，每个页面上的内容都是一样的

正如你们所看到的，这张小图片在每个页面上都是共享的，只是复制img标签，然后把它放在每个我的Vue视图上，我认为这是一件愚蠢的事情，而且与此无关

我对Vuejs工作原理的理解是： App.vue是共享的vue根目录内容，将加载到每个页面上。因此，如果我想制作一些静态图像，作为导航条加载到每个视图中，我需要将其放入App.vue文件中

这是我的App.vue文件

<template>
  <div id="app">
    <div class="nav">
      <nav> 
          <img src="https://blog.remotive.io/content/images/2017/03/logo-remotive-black-1.png" alt="">
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link> |
          <router-link to="/contact">Contact</router-link>
      </nav> 
    </div>
    <router-view />

    <div class="remotiveImage">
        <img src="https://remotive.io/remotive_website_static_pages/static/src/img/illustrations/1x/jobs.png" alt="">

    </div>
  </div>
</template>

<style>
  .nav img {
    width: 40%;
    height:auto;
  }

  .nav {
        display:flex;
        justify-content: flex-start;
        min-height: 50px;
        box-shadow: 0 5px 5px -5px rgba(2,2,2,.2);
  }

  .remotiveImage {
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
  }
</style>

家|
关于|
接触
.导航img{
宽度：40%；
高度：自动；
}
.导航{
显示器：flex；
调整内容：灵活启动；
最小高度：50px；
盒影：0 5px 5px-5px rgba（2,2,2,2）；
}
.remotiveImage{
显示器：flex；
弯曲方向：行；
证明内容：中心；
边缘顶部：20px；
}

这是我的主页视图文件

<template>
  <div class="hello">
    <div class="mainText">
      <h1> Find the Best Remote Job </h1>
    </div>
  </div>

</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.remotiveImage {
  margin-top:20px;
  display:flex;
  flex-direction: row;
  justify-content: center;
}

.mainText {
  display:flex;
  justify-content: center;
}
</style>

找到最好的远程作业
导出默认值{
名称：“HelloWorld”，
道具：{
msg:String
}
};
.remotiveImage{
边缘顶部：20px；
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.mainText{
显示器：flex；
证明内容：中心；
}

网站看起来是这样的

我不明白为什么我的视图中的文本内容位于App.vue中的图片顶部

我做错了什么？ App.vue内容是否应该位于每个页面的顶部

如果我想添加任何组件或任何HTML，它总是位于这张图片的顶部，这张图片正在App.vue中加载

---

我对前端非常熟悉，对Vue也非常熟悉，因此任何帮助和建议都将非常感激和有用。

将您的app.Vue模板更改为如下所示：

<template>
  <div id="app">
    <div class="nav">
      <nav> 
          <img src="https://blog.remotive.io/content/images/2017/03/logo-remotive-black-1.png" alt="">
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link> |
          <router-link to="/contact">Contact</router-link>
      </nav> 
    </div>

    <div class="remotiveImage">
        <img src="https://remotive.io/remotive_website_static_pages/static/src/img/illustrations/1x/jobs.png" alt="">
    </div>

    <router-view />
  </div>
</template>

家|
关于|
接触

基本上，路由器正在呈现的内容（包含相关组件的文本）将在此行呈现：

<router-view />

因此，如果您想让app.vue内容（图像）显示在其上方，只需确保它位于路由器视图附近即可

---

App.vue本质上是路由器内容的包装器，而不仅仅是在内容之前或之后进行渲染。现在我明白了窍门是什么了。非常感谢你