我的网站标题中有一个路由器链接,单击后会转到页面 /registration
,上面有一个表单。我想要实现的是,当单击它时,它会使用 vueScrollTo 插件滚动到注册表表单。
它现在可以工作,但不是 100% 我希望它的行为方式。截至目前,当不在 /registration
页面上并单击时,它会完美滚动到表单,但是当我在 /registration
页面本身并单击路由器链接时,我会收到警告
尝试滚动到不在页面上的元素:未定义
我相信这种情况正在发生,因为我在已安装的生命周期中触发了该事件。有没有更好的解决方案可以使其正常工作?
站点标头组件
<template> <router-link to="/registration" class="nav-row--primary__button" @click.native="scrollToRegForm()" > Sign up </router-link> </template> <script> export default { mounted() { if (window.location.href.indexOf("/registration") > 0) { const regForm = document.getElementById("regForm"); setTimeout(() => this.scrollToRegForm(regForm), 1); } }, methods: { scrollToRegForm(element) { VueScrollTo.scrollTo(element, 1000); } } }
注册页面组件
<div class="container--content spacing-ie" id="regForm"> <RegistrationForm /> </div>
使用 setTimeout:
}
首先需要在
yarn中添加vue-scrollto
,然后在nuxt.config.js
中添加以下配置那么,这个模板应该可以解决问题
尝试从另一个页面进行此操作,效果很好,也无需从此页面调用
vue-scrollto
,只需使用简单的<nuxt-link>
即可移动。此文档页面可以帮助您了解
$refs
: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements