Vue.js滚动到同一路线的页面顶部

我可以像这样设置滚动行为到Vue.js路由器：

const router = new Router({
    mode: 'history',routes: [
        {
            path: '/',name: 'index',component: Main
        },{
            path: '/some-path',name: 'some-path',component: SomePath
        }
    ],scrollBehavior() {
        return {x: 0,y: 0}
    }
})

当您单击某个不是最新的页面的链接时,这非常有效.当我点击已经渲染的链接时,即在页脚中,没有任何反应. Vue Router假设没有状态转换.在这种情况下向上滚动的首选方法是什么？

解决方法

你不能通过vue-router做到这一点.
但是您可以向每个路由器链接添加滚动到顶部方法.

只需创建一个方法

methods: { 
           scrollToTop() {
                window.scrollTo(0,0);
           }
        }

并将其添加到链接

<router-link @click.native="$scrollToTop">

如果你想在页脚之外使用它,最好将它添加到Vue原型中

Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)

这不是100％的解决方案,但它是最简单的解决方案

原文地址：https://www.jb51.cc/js/157656.html