【问题标题】:Scrollbehavior not working with nuxt-link滚动行为不适用于 nuxt-link
【发布时间】:2019-12-12 08:02:24
【问题描述】:

我希望我的应用在导航回我的一条路线时保持相同的滚动位置。如果我使用浏览器的后退按钮向后导航,它就可以工作,但是当我单击链接(使用 nuxt-link 创建)时,滚动位置会在导航到我的路线时重置为 0。

我尝试用我自己的替换 nuxt.config.js 中的 scrollBehavior 函数。该函数被调用,但 savedPosition 参数为空,所以这显然是重置滚动位置的原因。同样,如果我使用浏览器的后退按钮而不是单击来自其他路由的链接,那么没有问题,savedPosition 参数设置为其预期值并发生滚动。我不明白为什么在使用链接导航时它不起作用以及我能做些什么来解决这个问题。任何帮助将不胜感激。

【问题讨论】:

    标签: vue.js scroll nuxt.js


    【解决方案1】:

    我相信发生这种情况的原因是nuxt-link 正在将一个新页面推入后台堆栈。

    考虑到这一点,scrollBehaviour 被调用时使用了一个空的 savedPosition 参数,因为这是一个全新的页面。这类似于在进行编程导航时调用router.push()

    我找不到任何严格使用nuxt-link 模拟后退按钮行为的方法,但使用programmatic navigation 很容易实现:

    // go backward one page
    router.go(-1)
    

    【讨论】:

    • 感谢您的回答。至少这意味着我在这里并不疯狂。猜猜这是一个可以接受的解决方法,我现在会使用它。
    猜你喜欢
    • 2022-11-16
    • 2019-07-08
    • 2015-11-07
    • 2022-12-10
    • 2019-03-31
    • 2021-01-01
    • 1970-01-01
    • 2021-08-16
    • 1970-01-01
    相关资源
    最近更新 更多