0

当主页在路径“/”处加载时，两个组件都正确加载，我可以手动向下滚动到副标题部分，这样就可以了。这两个组件都有一个 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>

英雄主线

<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"
  }
4

1 回答 1

0

我不敢相信我在这上面花了这么多时间，但是在 router-link 所在组件的父容器上有一个 overflow-y:scroll 属性，我不知道为什么去掉它才能让它工作，它破坏了其他完全不相关的东西，但那是另一个问题。

于 2022-01-23T16:37:57.250 回答