如何在 vue 2 单页应用程序中触发 scrolltop？答案

【问题标题】：How to trigger scrolltop in vue 2 single page application?如何在 vue 2 单页应用程序中触发 scrolltop？
【发布时间】：2018-03-27 05:27:22
【问题描述】：

我在 vue2 应用程序中使用了 vee-validate 进行表单验证。在单击位置按钮时，我需要滚动到错误消息。

<a href="javascript:void(0)" class="btn btn-success"  style="border-radius: 4px" @click.prevent="addNewLocation"> location
     <span class="ti-plus"></span>
</a>

这里addNewLocation()方法动作是：

addNewLocation () {
                this.$validator.validateAll().then(isValid => {
                    if (isValid) {
                        this.$store.commit('order/MUTATE_ADD_NEW_LOCATION', {stair_built_location: this.stair_built_location});
                        let locationArrayIndex = this.order.locations.length - 1;
                        this.$router.push({ name: 'StairHeader', params: { location_index: locationArrayIndex }});
                    } else {
                        window.scrollTo(0,0);
                        console.log('invalid');
                    }
                });
            },

在代码中 window.scrollTo(0,0) 不起作用。我怎么解决这个问题？

【问题讨论】：

我无法在此处重现该错误，window.scrollTo(0,0) 是几乎所有浏览器的标准，在这里仍然有效。
这不起作用兄弟。通常它应该适用于任何事件。它用于组件中。当代码运行时，vue2 会缩小代码。我认为它在缩小的 js 中没有意义。

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

您需要像这样在路由添加功能中使用scrollBehavior

scrollBehavior (to, from, savedPosition) {
     if (to.hash) {
         return { selector: to.hash } 
     } 
  }

它应该检测是否在 URL 中添加了任何#something 并滚动到它。

您可以将它与例如路由器链接一起使用，然后在to=" 中传递hash

<router-link :to=" { hash: #IDofDiv } "> scroll to div </router-link>

您还应该能够从代码中添加哈希。您可以在vuejs router docs 中找到更多、更复杂的信息。

记得用这个ID添加div。

【讨论】：

实际上这适用于更改路线。但是在这里它需要在相同的路线和相同的组件中工作。如果输入表单中有错误消息，我需要自动滚动顶部以显示验证错误消息，点击提交按钮。
告诉我你的路由请你可以上传到 github gist 并分享链接，以免有问题
你在关闭路由后添加了这个功能？
这里没有路由问题。代码在顶部给出，我需要在按钮事件上滚动页面。单击按钮时，页面应滚动到顶部。如果它完成了，那么我可以解决我的问题。
看我给了你应该如何完成它的解决方案。它应该工作。我提供了经过测试并在我的许多项目中工作的代码。我添加了你应该放在路由器中的代码，所以我想看看你是否将它粘贴到正确的位置。此外，您可以查看文档，这些文档准确地展示了如何做您想做的事情。