Vue Router 滚动行为不会滚动到 id答案

【问题标题】：Vue Router scroll behavior won't scroll to idVue Router 滚动行为不会滚动到 id
【发布时间】：2022-01-24 00:37:57
【问题描述】：

当主页在路径“/”加载时，两个组件都正确加载，我可以手动向下滚动到副标题部分，这样就可以了。这两个组件都有一个 100vh 类。当我使用“a”标签时，它会转到 id，因为它应该是，但不是路由器链接。

subhead 是 Subheadsection 中 div 的 id。

HeroHeadline 的组件中有路由链接

我在 scrollBehavior 函数中尝试了很多东西，但似乎没有任何效果。控制台中没有错误或警告。

任何建议将不胜感激。

路由器文件

import {
  createRouter,
  createWebHistory,
  RouteRecordRaw,
  RouterScrollBehavior,
} from "vue-router";
import HomePage from "../pages/HomePage.vue";


const routes: RouteRecordRaw[] = [
  {
    path: "/",
    name: "Home",
    component: HomePage,
  },
  {
    path: "/:catchAll(.*)*",
    component: () => import("../pages/Error404.vue"),
  },
];
const scrollBehavior: RouterScrollBehavior = (to, from, savedPosition) => {
  if (to.hash ) {
    return { el: to.hash};
  }

  if (savedPosition) {
  
    return savedPosition;
  }
 
  console.log('else');
  
    return { left:0, top:0 };
};

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior,
  routes: routes,
});

export default router;

主页

<template>
  <HeroMain />
  <SubHeadSection />
</template>
<script setup lang="ts">
import HeroMain from "../components/hero/HeroMain.vue";
import SubHeadSection from '../components/sections/SubHeadSection.vue';
</script>

HeroMain

<template>
    <div class="section parallax bg1">
        <HeroHeadline />
    </div>
</template>

<script setup lang="ts">
import HeroHeadline from './HeroHeadline.vue';</script>

HeroHeadline 的组件中有路由链接

<router-link to="#subhead">...</router-link>

堆栈

  "dependencies": {
    "@heroicons/vue": "^1.0.5",
    "@vueuse/core": "^7.5.3",
    "pinia": "^2.0.9",
    "vue": "^3.2.25",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.15",
    "typescript": "^4.5.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  }

【问题讨论】：

请修剪您的代码，以便更容易找到您的问题。请按照以下指南创建minimal reproducible example。

标签： vue-router vue-router4

【解决方案1】：

我不敢相信我在这上面花了这么多时间，但是路由器链接所在组件的父容器上有一个 overflow-y:scroll 属性，我不知道为什么要取消它它起作用了，它破坏了其他完全不相关的东西，但那是另一个问题。

【讨论】：