Question

我尝试使用nuxt.js和this template创建网站。我将文件夹：css，img，js，scss，供应商从模板复制到了nuxt项目的 static 文件夹。之后，我制作了nuxt.config.js和pages/index.vue文件。除在页面上平滑滚动外，其他所有功能均正常。我在浏览器控制台中看到错误：

@ContextConfiguration(classes = { CacheControlTestConfiguration.class })

如何解决此问题？

UPD：您可以download这个项目来重现错误

Answer 1

从 Nuxt v2.9.0 开始，可以使用文件覆盖路由器 scrollBehavior。这个文件应该放在 ~/app/router.scrollBehavior.js （注意：如果在 Windows 上运行，文件名是区分大小写的）。

资源：

这是一个平滑滚动到散列链接的示例，否则滚动到顶部。

export default function (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      behavior: 'smooth'
    }
  } else {
    return { x: 0, y: 0, behavior: 'smooth' }
  }
}

Answer 2

首先，您需要覆盖路由器的默认行为，例如将其粘贴到nuxt.config.js router: { scrollBehavior(to) { if (to.hash) { return window.scrollTo({ top: document.querySelector(to.hash).offsetTop + window.innerHeight, behavior: 'smooth' }); } return window.scrollTo({ top: 0, behavior: 'smooth' }); } },中的任何位置，并且锚链接应像这样<nuxt-link :to="{ path: '/',hash:'#about'}">Contact</nuxt-link>

Answer 3

Sajjad Aljileezi的答案是正确的，但是，如果您正在寻找一种更简单的选择，那就是在自定义CSS文件中添加此简单行。您可以将所述文件导入到您的nuxt.config.js文件中。

html {
   scroll-behavior: smooth;
}

nuxt.config.js文件需要这样的内容：

css: ['~/assets/style/yourcssfile.css']

Answer 4

这是由于服务器端渲染所致，您正在使用SSR无法解析的内容，可能是调用窗口或文档。

如果需要指定仅在客户端上导入资源，则需要使用 process.client 变量。

您可以在此处查看此内容：https://nuxtjs.org/faq/window-document-undefined

Answer 5

似乎在 nuxt 2.16+ 中用于平滑滚动基本设置

<button @click=scrollToTop()>Jump to top of page</button>

。 . .

methods: {
    scrollToTop() {
      window.scrollTo({ top: 0 });
    }
  }

如何在nuxt.js和bootstrap网站中平滑滚动？

5 个答案: