时间戳

首页 > 解决方案 > 在使用 vue 路由器更改到另一个路由器位置之前，允许当前窗口滚动到顶部

javascript - 在使用 vue 路由器更改到另一个路由器位置之前，允许当前窗口滚动到顶部

问题描述

我希望我的页面在切换到另一个选项卡之前滚动到顶部。我尝试了以下代码，但徒劳无功。

<b-collapse id="nav-collapse" is-nav>
            <b-navbar-nav class = "ml-5">
                <b-nav-item :active= "$route.matched.some(({ name }) => name === 'tab1')"  class = "navitem" @click= "routehome">tab1</b-nav-item>
                <b-nav-item :active= "$route.matched.some(({ name }) => name === 'tab2')"  class = "navitem" @click= "routeproject">tab</b-nav-item>
                <b-nav-item :active= "$route.matched.some(({ name }) => name === 'tab3')"   class = "navitem" @click= "routeexperience">tab3</b-nav-item>
            </b-navbar-nav>
<b-collapse id="nav-collapse" is-nav>

在脚本中，我尝试添加它，但由于代码异步运行，它不显示动画。

   totab1() {
        window.scrollTo(0, 0);
        this.$router.push("/tab1");
    },
    totab2() {
        window.scrollTo(0, 0);
        this.$router.push("/tab2");
    },

然后我尝试添加 then 函数，但似乎 windows.scroll(0,0) 不支持。有没有办法解决这个问题？

    totab3() {
        window.scrollTo(0, 0).then(() => {
            this.$router.push("/tab3");
        })
    }

标签： javascriptvue.jsvuejs2

解决方案

在页面更改之前滚动到顶部

这可以通过 Vue-router 的Navigation Guards来实现。尽管旨在保护路由，但它们也可以很容易地用于在路由更改之前调用任意函数。

您可以从特定组件中调用它（使用组件中的 guard）

beforeRouteLeave() { window.scrollTo(0, 0) }

或者，要应用于所有路由，请在您的 router.js 文件中应用，例如

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0);
})

页面更改后滚动到顶部

Vue路由器有一个有用的scrollBehavior 方法。在您的情况下，您想返回{ x: 0, y: 0 }到页面的顶部和左侧。所以在你的 router.js 文件中，添加如下内容：

const router = new VueRouter({
  routes: [...],
  scrollBehavior () {
    return { x: 0, y: 0 }
  }
});

推荐阅读