文章总结:

这篇文章主要介绍了Vue Nuxt.js中的路由配置和滚动锚点链接的实现。首先，文章提到了使用名为i18n的中间件处理国际化相关的逻辑。接着，文章详细解释了如何定义一个异步的滚动行为函数，用于处理页面导航时的滚动逻辑。这个函数会根据目标路由是否包含hash来决定滚动到哪个位置。如果目标路由有hash，那么会查找对应的元素并根据浏览器是否支持平滑滚动来执行不同的滚动操作。最后，文章展示了如何使用nuxt-link组件进行页面跳转，并在新页面中接收参数和滚动到顶部。

NuxtJS路由滚动锚点链接

  1. 路由配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
router: {
  middleware: 'i18n',
  scrollBehavior: async function(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    const findEl = async (hash, x = 0) => {
      return (
        document.querySelector(hash) ||
        new Promise(resolve => {
          if (x > 50) {
            return resolve(document.querySelector("#app"));
          }
          setTimeout(() => {
            resolve(findEl(hash, ++x || 1));
          }, 100);
        })
      );
    };
    if (to.hash) {
      let el = await findEl(to.hash);
      if ("scrollBehavior" in document.documentElement.style) {
        return window.scrollTo({top: el.offsetTop - 50, behavior: "smooth" });
      } else {
        return window.scrollTo(0, el.offsetTop - 50);
      }
    }
    return { x: 0, y: 0 };
  }
}
  • 代码解释
    1. middleware: ‘i18n’
      • 表示使用一个名为 i18n 的中间件，通常用于处理国际化相关的逻辑。
    2. scrollBehavior
      • 定义了一个异步的滚动行为函数，用于处理页面导航时的滚动逻辑。
      • 该函数接收三个参数：to（目标路由对象）、from（来源路由对象）和 savedPosition（保存的位置）。
    3. savedPosition
      • 如果 savedPosition 存在，表示用户点击了浏览器的前进/后退按钮，返回保存的位置，页面将滚动到之前的位置。
    4. findEl
      • 一个异步函数，用于查找带有特定 hash 的元素。
      • 参数 hash 表示要查找的元素的 hash 值（例如 #section1）。
      • 参数 x 是一个计数器，用于限制查找次数，防止无限递归。
      • document.querySelector(hash)：尝试查找元素。
      • new Promise(resolve => {…})：如果找不到元素，则等待 100 毫秒后再次尝试，最多尝试 50 次。
      • 如果尝试 50 次仍未找到，则返回 document.querySelector(“#app”)，即页面的根元素。
    5. if (to.hash)
      • 检查目标路由是否包含 hash。
      • 使用 findEl 查找目标元素，找到后根据浏览器是否支持平滑滚动来执行不同的滚动操作。
      • 如果支持平滑滚动，调用 window.scrollTo({ top: el.offsetTop - 50, behavior: “smooth” }) 平滑滚动到目标元素，且顶部留有 50 像素的空间。
      • 如果不支持平滑滚动，调用 window.scrollTo(0, el.offsetTop - 50)，立即滚动到目标位置。
    6. return { x: 0, y: 0 }
      • 如果目标路由没有 hash，则默认滚动到页面顶部。
  1. nuxt-link
    1
    2
    3
    4
    5
    6
    7
    8
    <nuxt-link
        :to="{
            name: 'Business-Case',
            hash: '#Asartists',
            params: { Language: flag },
        }">
        Link
    </nuxt-link>
  • 代码解释
    1. name:路由
    2. hash:锚点链接
    3. params:传参
  1. 跳转的页面查看
1
2
3
4
5
6
7
8
created() {   
 this.flag = this.$route.params.Language、
}
///接受传来的参数
mounted() {
    // 滚动到顶部
  window.scrollTo(0, 0)
},
  • 代码解释
    1. this.$route.params接受nuxt-link传来的参数
    2. 因为nuxt-link跳转页面时，会自动执行mounted()，所以需要手动将页面滚动到顶部