vue.js - VueJS 滚动到不同路线的部分

Question

我正在尝试使用 Vue 和 Vue Router(具有历史记录模式)滚动到页面上的 anchor 。

在索引页上时，滚动行为会按预期跳转到该部分。

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

我确信这是一件非常简单的事情，但我无法理解它!

感谢任何帮助!

我的路由器索引:

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

Vue 路由器 v3.x

这是一个有点老的问题，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>

这应该允许您从其他 View /组件访问这些链接，并且在单击时会将您重定向到命名路径(在本例中为主页)，并滚动到指定的哈希值(#enter、#prizes、#faqs ).

除了问题中的路由器代码片段之外，您还可以使用 native 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 }
        }
      }
    })

Vue Router v4.x 更新

你写你的 router-link 是一样的，但你现在可以把滚动行为和元素选择写得更整洁一点。 From the docs

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    }
  }
})