NUXT路由锚点

  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);
        }
      }

      return { x: 0, y: 0 };
    }
  },

路由的配置

        <nuxt-link

          :to="{
            name: 'Business-Case',
            hash: '#Asartists',
            params: { Language: flag },
          }"
        >
         Link
        </nuxt-link>



///name:路由
///hash:锚点链接
///params:传参

nuxt-link 的使用

  created() {   
 this.flag = this.$route.params.Language、
}

///接受传来的参数

  mounted() {
    // 滚动到顶部
    window.scrollTo(0, 0)
  },
因为nuxt路由过来会有记录screenTop 所以打开归零
© 版权声明
THE END
喜欢就支持一下吧
点赞6
分享
评论 抢沙发
瘦子的头像-瘦子-瘦子Blog-瘦子LOG

昵称

取消
昵称表情代码图片