时间戳

首页 > 解决方案 > Vue.js 滚动到同一路线的页面顶部

vue.js - 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.jsvue-router

解决方案

你不能做这个低谷vue-router。但是您可以将滚动到顶部的方法添加到每个router-link。

只需创建一个方法

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

并将其添加到链接中

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

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

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

这不是 100% 的解决方案，但它是最简单的解决方案

推荐阅读