Vue.js/Laravel8 SPA项目VueRouter无法滚动到锚点标签问题咨询

你的配置存在2个核心逻辑错误，导致滚动不生效：

1. 你要实现的是同页面内的锚点跳转，但你给section1配置了独立的路由路径/section1，且在app.vue中同时直接引入了section1组件和<router-view>，点击路由链接时会跳转至独立的/section1页面，而非当前页面的#section1锚点位置。
2. 你配置的scrollBehavior仅在检测到路由携带hash参数时才会触发锚点滚动，但你当前的<router-link>未传入任何hash参数，自然无法触发滚动逻辑。

1. 调整路由配置 #

如果所有section都在首页内渲染、不需要单独的子页面，删除section1的独立路由配置，同时补全scrollBehavior的兜底逻辑：

// router.js 完整修改后代码
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../vue/home";

Vue.use(VueRouter);

export default new VueRouter ({
    mode: "history",
    base: process.env.BASE_URL,
    routes: [
        {path: "/", name: "home", component: Home},
    ],
    scrollBehavior(to, from,  savedPosition) {
        if (savedPosition) {
            return savedPosition;
        } else if (to.hash) {
            return {
                selector: to.hash,
                // 如果页面有固定导航栏，可加偏移量避免内容被导航遮挡
                offset: { x: 0, y: 60 }
            }
        }
        // 无锚点时默认滚动到页面顶部
        return { x: 0, y: 0 }
    }
});

2. 修改router-link参数 #

在navigation.vue的路由跳转配置中补充hash参数，指向对应锚点的id：

<!-- navigation.vue 完整修改后代码 -->
<template>
  <div class="navbar">
    <router-link :to="{ name: 'home', hash: '#section1' }">Section1</router-link>
  </div>
</template>

3. 清理冗余代码 #

你当前app.vue中同时直接渲染了home、section1组件和<router-view>，逻辑冲突，删除冗余的<router-view>即可：

<!-- app.vue 完整修改后代码 -->
<template>
  <div class="container">
    <main>
      <home></home>
      <section1></section1>
    </main>
  </div>
</template>

如果你使用的是Vue2 + VueRouter@3版本，可能存在DOM未渲染完成就触发滚动逻辑、找不到锚点元素的问题，可修改scrollBehavior为异步触发：

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
  if (to.hash) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ selector: to.hash })
      }, 100)
    })
  }
  return { x: 0, y: 0 }
}

内容的提问来源于stack exchange，提问作者Artur Müller Romanov