Question

我正在尝试使用Vue和Vue Router（具有历史记录模式）滚动到页面上的锚点。

在索引页面上时，通过跳到该部分，滚动行为将按预期方式工作。

但是，当我是另一个页面时，它会将索引页面加载到顶部，而不是锚点指向的位置。

我敢肯定这是一件非常简单的事情，但我无法理解！

感谢您的帮助！

我的路由器索引：

export default new Router({
  scrollBehavior: function(to, from, savedPosition) {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },

  mode: 'history',
  routes: [ ... ]
})

我的导航：

<router-link @click.native="closeNav" to="/#enter">Enter</router-link>
<router-link @click.native="closeNav" to="/#prizes">Prizes</router-link>
<router-link @click.native="closeNav" to="/#faqs">FAQ</router-link>
<router-link @click.native="closeNav" to="/contactus">Contact</router-link>

Answer 1

这是一个古老的问题，OP几乎肯定已经找到了解决方案，但是对于遇到此问题的任何人，这都可以解决问题：

<router-link :to="{ name: 'Homepage', hash: '#enter' }">Enter</router-link>
<router-link :to="{ name: 'Homepage', hash: '#prizes' }">Prizes</router-link>
<router-link :to="{ name: 'Homepage', hash: '#faqs' }">FAQ</router-link>
<router-link :to="{ name: 'Contact' }">Contact</router-link>

这应该使您能够从其他视图/组件访问这些链接，并且单击该链接会将您重定向到指定的路由（在这种情况下为“首页”），并滚动到指定的哈希（＃enter，＃prizes，＃faqs ）。

除了问题中的路由器代码片段外，您还可以使用本机window.scrollTo方法添加平滑滚动：

export default new Router({
  routes: [],
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      return window.scrollTo({ 
        top: document.querySelector(to.hash).offsetTop, 
        behavior: 'smooth' 
      })
    } else {
      return { x: 0, y: 0 }
    }
  }
})

Answer 2

我使用的是window.scrollTo()而不是export default new Router({ routes: [], mode: 'history', scrollBehavior (to, from, savedPosition) { if (to.hash) { return document.querySelector(to.hash).scrollIntoView({ behavior: 'smooth' }); } else { return savedPosition || { x: 0, y: 0 } } } })

{{1}}

VueJS从不同的路线滚动到部分

2 个答案: