Vue 滚动到另一个页面上的锚点? [英] Vue scroll to anchor on another page?
问题描述
我的站点标题中有一个路由器链接，点击后会转到页面 /registration，其中有一个表单.我想要实现的是，当单击它时，它会使用 vueScrollTo 插件滚动到 reg 表单.
它现在正在工作，但不是 100% 我希望它的行为方式.截至目前，当不在 /registration 页面上并单击它时，它会完美地滚动到表单，但是当我在 /registration 页面本身上并单击路由器链接时，我得到一个警告
试图滚动到不在页面上的元素:未定义
我相信这是因为我在已安装的生命周期中触发事件.有没有更好的解决方案来使这项工作正常进行?
站点标题组件
<router-link to="/registration";class="nav-row--primary__button";@click.native="scrollToRegForm()";>注册</路由器链接></模板><脚本>导出默认{安装(){如果(window.location.href.indexOf(/注册")> 0){const regForm = document.getElementById(regForm");setTimeout(() => this.scrollToRegForm(regForm), 1);}},方法: {scrollToRegForm(元素){VueScrollTo.scrollTo(element, 1000);}}}注册页面组件
<报名表/>需要先yarn add vue-scrollto，然后在nuxt.config.js中添加如下配置代码>
{模块: ['vue-scrollto/nuxt',]}那么，这个模板应该可以解决问题
<div><p ref=regForm"样式=背景颜色:hsl(210, 50%, 13%);高度:50vh；边距顶部:120vh"</p></模板><脚本>从'vue'导入Vue从 'vue-scrollto' 导入 VueScrollToVue.use(VueScrollTo)导出默认{安装(){VueScrollTo.scrollTo(this.$refs.regForm, 1000, { easing: 'linear' })},}
从另一个页面尝试过这个，效果很好，也不需要从这个页面调用 vue-scrollto，使用简单的
这个文档页面可以帮助你理解$refs:https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements
I have a router link in my site header and when clicked goes to the page /registration which has a form on it. What I would like to achieve is when clicked it scrolls to the reg form using vueScrollTo plugin.
It's working now but not 100% how I would prefer it to behave. As of now when not on the /registration page and clicked it scrolls perfectly to the form however when I am on the /registration page itself and click the router link I get a warning
trying to scroll to an element that is not on the page : undefined
I believe this is happening because I am firing the event on the mounted lifecycle. Is there a better solution to have this work properly?
Site header component
<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);
}
}
}
Registration page component
<div class="container--content spacing-ie" id="regForm">
<RegistrationForm />
</div>
You need to firstly yarn add vue-scrollto, then add the following configuration to nuxt.config.js
{
modules: [
'vue-scrollto/nuxt',
]
}
Then, this template should do the trick
<template>
<div>
<p ref="regForm" style="background-color: hsl(210, 50%, 13%); height: 50vh; margin-top: 120vh"></p>
</div>
</template>
<script>
import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)
export default {
mounted() {
VueScrollTo.scrollTo(this.$refs.regForm, 1000, { easing: 'linear' })
},
}
</script>
Tried this coming from another page and it is working great, no need to call vue-scrollto from this page neither, move by using a simple <nuxt-link>.
This documentation page can help you understand $refs: https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements
这篇关于Vue 滚动到另一个页面上的锚点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
