Vue 3：我无法向下或向上滚动

Question

当我尝试从模式加载用户的（链接架构示例：test.com/!#/user/4qsdqsd7qdsqd）页面时，我得到了该页面，但我无法向下或向上滚动。我在日志中没有错误。我还在 HTML5 模式下修改了历史模式，但没有改变错误。但是，如果我使用浏览器的刷新按钮刷新页面。页面正常，可以滚动了 这是一个 vuejs 应用程序（版本 3）

路由器：下一个路由器

{
path: "/",
redirect: "/dashboard",
component: DashboardLayout,
children: [
  {
    path: "/dashboard",
    name: "dashboard",
    components: { default: Dashboard },
  },
  {
    path: "/user/:id",
    name: "profile",
    components: { default: Profile },
  },
  {
    path: "/reports",
    name: "Signalisations",
    components: { default: Reports },
  },
  {
    path: "/users",
    name: "Utilisateurs",
    components: { default: Users },
  },
  {
    path: "/addfeed",
    name: "Ajouter une publication",
    components: { default: AddFeed },
  },
],},

这里是我为用户页面声明路由的地方。

<modal v-model:show="modals.feedDetailsViewer">
<template v-slot:header>
  <h6 class="modal-title" id="modal-title-default">Détails</h6>
</template>
<div class="row">
  <div v-if="detailsViewerData.image_url !== ''" class="col-12">
    <h4>Photo</h4>
    <img
      :src="detailsViewerData.image_url"
      alt="image"
      style="width: 100%"
    />
  </div>
  <div v-if="detailsViewerData.video_url !== ''" class="col-12">
    <h4>Vidéo</h4>
    <video
      :src="detailsViewerData.video_url"
      alt="video"
      style="width: 100%"
    ></video>
  </div>
  <hr class="mt-4" />
  <div v-if="detailsViewerData.userPseudo !== ''" class="col-12">
    <h5 class="mt-3">Créer par</h5>
    <p>
      <!-- here link to user page  -->
      <router-link :to="'/user/' + detailsViewerData.userId">
        {{ detailsViewerData.userPseudo }}
      </router-link>
      <!-- end -->
    </p>
  </div>
  <div v-if="detailsViewerData.content != ''" class="col-12">
    <h5 class="mt-3">Contenu</h5>
    <p>{{ detailsViewerData.content }}</p>
  </div>
  <div v-if="detailsViewerData.nbrComments !== ''" class="col-12">
    <p>
      Commentaires: {{ detailsViewerData.nbrComments }}; Favoris:
      {{ detailsViewerData.favoriteCount }}; Partages:
      {{ detailsViewerData.repostCounts }};
    </p>
  </div>
  <div v-if="detailsViewerData.createdAt !== null" class="col-12">
    <h5 class="mt-3">Date de création</h5>
    <p>{{ getGoodDate(detailsViewerData.createdAt) }}</p>
  </div>
</div>
<template v-slot:footer>
  <base-button
    type="link"
    class="ml-auto"
    @click="modals.feedDetailsViewer = false"
    >Fermer
  </base-button>
</template>
</modal>

这里是包含用户页面链接的模态

如果有人知道什么会导致这种错误，他的帮助将不胜感激。提前谢谢你

Answer 1

路由器视图密钥未自动更新。添加后用户页面的组件会自动更新

<router-view :key="$route.path" />