NUXT3 -NUXTLINK锚定不滚动单击或页面刷新

Question

我只是尝试将页面滚动到NUXT3中的一个锚点，而我所能做的任何事情都无法正常工作。它不会滚动单击，或者在URL中使用锚点的页面刷新。

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

尝试了其他一些SO答案，在NuxtConfig中添加自定义的ScrollBehaviour代码不起作用，并尝试在NUXT3中安装Vue-Scrollto，在使用Vue-Scrollto模块运行该应用程序时，我只是给了我这个错误

错误无法重新启动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＆amp; nuxt ，但要感谢

文件app/rout.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>
...

Answer 2

对我有用的是更简单。只需将以下内容添加到nuxt.config.ts文件中：

  router: {
    options: {
      scrollBehaviorType: "smooth",
    },
  },

这就是您所需要的。

您可以从该官方

希望它有帮助！