如何在Vue+TypeScript中路由跳转至指定div并自动滚动？

步骤1：修改Vue Router的scrollBehavior配置 #

你的scrollBehavior当前强制每次跳转都回到页面顶部，需要调整逻辑，让它能识别URL中的hash参数并滚动到对应元素。替换index.ts里的scrollBehavior函数为以下代码：

scrollBehavior(to, from, savedPosition) {
  // 优先恢复浏览器自带的保存位置（比如后退操作）
  if (savedPosition) {
    return savedPosition
  }
  // 若目标路由带hash，定位到对应id的元素
  if (to.hash) {
    const targetElement = document.querySelector(to.hash)
    if (targetElement) {
      return {
        el: to.hash,
        behavior: 'smooth' // 可选参数，开启平滑滚动效果
      }
    }
  }
  // 默认回到页面顶部
  return { top: 0 }
}

步骤2：用Vue Router的<router-link>实现跳转+滚动 #

替换原来的原生onclick写法，改用Vue Router提供的<router-link>组件，直接指定带hash的首页路径即可。不管当前在哪个页面，点击后都会先跳转到首页，再自动滚动到services元素：

<li class="nav-item">
  <router-link to="/#services" class="nav-link">Service</router-link>
</li>

注意事项 #

• 确认你的首页Home.vue中存在id为services的容器，比如：<div id="services">这里是服务板块内容</div>
• 若不需要平滑滚动，可删除scrollBehavior里的behavior: 'smooth'配置项
• 这种方式完全基于Vue Router的路由机制，不会出现跨页面失效的问题，和你期望的<a to="/contact">逻辑一致

内容的提问来源于stack exchange，提问作者Rex2.0