Vue3 + Vuetify3路由跳转后页面仅渲染顶部且不可滚动问题

核心原因分析 #

1. Vuetify的布局组件（如v-app、v-main）在路由切换时，因异步数据加载或计算操作的时机偏差，未正确计算容器高度，导致仅渲染可视区域且无法滚动。
2. 锚点跳转执行时机过早，目标元素虽已存在，但DOM布局尚未完成，scrollIntoView未实际生效。
3. Vue Router的默认滚动行为与Vuetify的滚动容器逻辑冲突，导致页面滚动状态异常。

解决方案 #

方案1：强制触发Vuetify布局重绘

利用Vuetify内置的布局更新方法，在页面挂载或路由参数变化时强制重新计算布局，同时调整锚点跳转时机确保DOM渲染完成：

<script setup>
import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useVuetify } from 'vuetify';

const route = useRoute();
const vuetify = useVuetify();

onMounted(() => {
  vuetify.application.update();
  scrollToElement();
});

// 监听路由参数变化，适配同页面路由更新场景
watch(() => route.params, () => {
  vuetify.application.update();
  scrollToElement();
}, { immediate: true });

function scrollToElement() {
  if (!route.hash) return;
  const targetId = route.hash.replace('#', '');
  const el = document.getElementById(targetId);
  if (el) {
    // 用requestAnimationFrame确保DOM布局完成后执行滚动
    requestAnimationFrame(() => el.scrollIntoView({ behavior: 'smooth' }));
  }
}
</script>

方案2：重置滚动容器布局

针对v-main等滚动容器高度异常的情况，通过强制重绘的方式修复：

<template>
  <v-main ref="mainRef">
    <!-- 页面内容 -->
  </v-main>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';

const mainRef = ref(null);
const route = useRoute();

onMounted(() => {
  resetScrollContainer();
  scrollToElement();
});

watch(() => route.params, () => {
  resetScrollContainer();
  scrollToElement();
});

function resetScrollContainer() {
  if (!mainRef.value) return;
  // 强制触发容器重绘
  mainRef.value.style.display = 'none';
  requestAnimationFrame(() => mainRef.value.style.display = '');
}

function scrollToElement() {
  if (!route.hash) return;
  const targetId = route.hash.replace('#', '');
  const el = document.getElementById(targetId);
  el && requestAnimationFrame(() => el.scrollIntoView());
}
</script>

方案3：确保计算操作完成后再跳转

若跳转前的计算操作包含异步逻辑，需等待操作完全完成后再执行路由跳转，避免目标页面数据不完整导致布局异常：

// 处理计算操作的函数
async function finishCalculation() {
  // 等待异步计算/请求完成
  await yourAsyncCalculationFunction();
  // 数据处理完毕后再跳转
  router.push({ name: 'AnotherPage', params: { id: index, variable: x} });
}

方案4：自定义Vue Router滚动行为

通过配置路由的滚动行为，重置页面滚动位置或直接处理锚点跳转：

const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由配置 */],
  scrollBehavior(to, from, savedPosition) {
    // 路由跳转时默认回到顶部
    const scrollPos = savedPosition || { top: 0 };
    // 若有锚点，直接跳转到目标位置
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth',
        ...scrollPos
      };
    }
    return scrollPos;
  }
});

内容的提问来源于stack exchange，提问作者helloworld