Vue-CLI哈希模式下子路由滚动位置重置与恢复问题求助

Hey there! Let's fix this in a cleaner, more Vue-friendly way that addresses both your pain points—ditching native DOM selectors and adding scroll position restoration when navigating back to child routes.

核心思路 #

Instead of duplicating code in every child route, we can handle scroll behavior in the parent component (the one containing the <router-view> for child routes). This keeps your code DRY, uses Vue's native refs, and lets us easily save/restore scroll positions per route.

Step 1: Parent Component Implementation #

Update your parent component to manage scroll positions and handle route changes:

<template>
  <div style="position: relative;">
    <!-- Your common content here -->
  </div>
  <div class='container' ref="container">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Store scroll positions for each child route (key = route fullPath)
      scrollPositions: {}
    };
  },
  watch: {
    '$route'(to, from) {
      const container = this.$refs.container;
      if (!container) return;

      // Save scroll position when leaving a child route
      if (this.isChildRoute(from)) {
        this.scrollPositions[from.fullPath] = container.scrollTop;
      }

      // Restore or reset scroll position when entering a child route
      if (this.isChildRoute(to)) {
        this.$nextTick(() => {
          // Use saved position if exists, else scroll to top
          container.scrollTop = this.scrollPositions[to.fullPath] || 0;
        });
      }
    }
  },
  mounted() {
    const container = this.$refs.container;
    // Initialize scroll position when directly loading a child route
    if (container && this.isChildRoute(this.$route)) {
      container.scrollTop = this.scrollPositions[this.$route.fullPath] || 0;
    }
  },
  methods: {
    // Helper to check if a route is a child of the current parent route
    isChildRoute(route) {
      return route.matched.some(record => record.parent === this.$route.matched[0]);
    }
  }
};
</script>

Step 2: Why This Works Better #

1. No native DOM selectors: We use this.$refs.container directly in the parent component, which is the Vue-recommended way to access DOM elements. You don't need to rely on document.querySelector anymore.
2. DRY code: No need to copy-paste scroll logic into every child route—everything is handled in one place.
3. Scroll position restoration: The scrollPositions object stores the scroll top value for each child route's full path. When navigating back, we automatically restore the last position.
4. Timing handled: $nextTick ensures we only adjust the scroll position after the DOM has updated (critical for ensuring the container is ready to scroll).

Why You Couldn't Access $refs in Child Components #

Child components can't directly access parent component refs by default. While you could use this.$parent.$refs.container, that creates tight coupling between parent and child. The parent-component approach above avoids this entirely, keeping your components decoupled.

Alternative: Provide/Inject for Child-Specific Logic #

If you need child components to handle their own scroll behavior (e.g., for special cases), you can use Vue's provide/inject to pass the container ref safely:

Parent Component:

provide() {
  return {
    getScrollContainer: () => this.$refs.container
  };
}

Child Component:

inject: ['getScrollContainer'],
created() {
  const container = this.getScrollContainer();
  if (container) {
    this.$nextTick(() => {
      container.scrollTop = this.$parent.scrollPositions[this.$route.fullPath] || 0;
    });
  }
},
beforeRouteLeave(to, from, next) {
  const container = this.getScrollContainer();
  if (container) {
    this.$parent.scrollPositions[from.fullPath] = container.scrollTop;
  }
  next();
}

But again, the parent-component approach is generally preferred for this scenario—it's cleaner and more maintainable.

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