Nuxt3 - NuxtLink定位，在单击或刷新页面时不滚动

Question

我只是想让页面滚动到Nuxt3中的一个锚点，而我所能做的一切都无法让它工作起来。它不会在单击时滚动，也不会在页面刷新时使用url中的锚。

<nuxt-link :to="{path: '/', hash: '#projects'}">Let's go</nuxt-link>

尝试了许多其他的答案，将自定义的scrollBehaviour代码添加到nuxtConfig没有工作，尝试在Nuxt3中安装vue-scrollTo只是在使用vue-scrollTo to模块运行应用程序时给了我这个错误。

错误不能重新启动nuxt:未定义序列化

任何帮助都将不胜感激！

全码

<script setup>
import '@/assets/css/main.css';

const { data } = await useAsyncData('home', () => queryContent('/').find())
const projects = data

</script>
<template>
  <div>
    <div class="flex flex-col h-screen">
    <div class="lg:p-20 p-10 text-white bg-orange-500">
      <p class="font-playfair lg:text-7xl text-4xl mb-5">Kia Ora, my name is <span class="font-medium italic">George Bates</span></p>
      <p class="font-lato lg:text-3xl text-xl mb-5">Content creator and web developer in Auckland, New Zealand</p>
    </div>
    <div class="lg:p-20 p-10 text-white flex flex-grow" style="background-image: url('images/header.jpg'); background-position: center; background-size: cover;">
    <nuxt-link :to="{path: '/', hash: '#projects'}">Let's go</nuxt-link>
    </div>
    </div>

    <main class="lg:p-20 p-10" id="projects">
      <p class="text-3xl font-playfair mb-5 font-semibold pb-2 text-orange-500">Some of my work</p>
      <Projects :projects="projects" />
    </main>
  </div>
</template>

Answer 1

您说您已经尝试添加自定义scrollBehavior，但您是如何做到的？

我对Vue & Nuxt非常陌生，但是多亏了这个吉特布的回答，您可以自定义滚动行为，这对我很有用：

文件app/route.options.ts

import type { RouterConfig } from '@nuxt/schema';

// https://router.vuejs.org/api/#routeroptions
export default <RouterConfig>{
  scrollBehavior(to, from, savedPosition) {
    return {
      el: to.hash,
      behavior: 'smooth',
    };
  },
};

(在这里，我提出了一个平滑的行为，但默认情况下似乎是auto__)

并使用一个代码示例，如：

...
<NuxtLink :to="{path: '/', hash: '#anchor'}">Let's go!</NuxtLink>
...