Question

Nuxt3 - NuxtLink 到锚点在点击或页面刷新时不会滚动

2022-07-06

2158

vue.js nuxt.js nuxt3.js

我只是想让页面滚动到 Nuxt3 中的锚点，但我无法让它工作。单击时它不会滚动，或者在 URL 中带有锚点的页面刷新时也不会滚动。

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

尝试了一堆其他 SO 答案，将自定义 scrollBehaviour 代码添加到 nuxtConfig 不起作用，尝试在 Nuxt3 中安装 vue-scrollTo 时，在使用 vue-scrollTo 模块运行应用程序时只给了我这个错误

ERROR Cannot restart nuxt: serialize is not defined

任何帮助都将不胜感激！

完整代码

<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 非常陌生 ，但多亏了这个 Github 答案，您可以自定义滚动行为，这对我有用：

文件 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>
...

Answer 2

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

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

这就是您所需要的。

您可以从官方 Nuxt3 文档的“哈希链接的滚动行为”下阅读更多内容。

希望对您有所帮助！