Vue路由切换时组件控制内部滚动条位置

介绍

在 Vue Router 中，可以通过设置 scrollBehavior 来控制路由切换时的滚动行为，可以在 scrollBehavior 中根据路由的不同情况来自定义滚动行为，例如在切换路由时保持滚动位置不变。

如果要在切换组件时，实现组件内部的其他组件的滚动条位置不变，可以在组件中使用 ref 来获取该组件的 DOM 元素，并在 activated 钩子函数中设置滚动位置。

示例代码

下面是一个示例代码：

<template>
  <div ref="container">
    <div v-for="item in list" :key="item.id">{{ item.text }}div>
  div>
template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      list: [
        { id: 1, text: 'item 1' },
        { id: 2, text: 'item 2' },
        { id: 3, text: 'item 3' },
        { id: 4, text: 'item 4' },
        { id: 5, text: 'item 5' },
        { id: 6, text: 'item 6' },
        { id: 7, text: 'item 7' },
        { id: 8, text: 'item 8' },
        { id: 9, text: 'item 9' },
        { id: 10, text: 'item 10' }
      ]
    }
  },
  activated() {
    this.$refs.container.scrollTop = this.scrollTop || 0;
  },
  deactivated() {
    this.scrollTop = this.$refs.container.scrollTop;
  }
}
script>

上面的代码中，我们定义了一个列表组件，使用 ref 获取了列表容器的 DOM 元素，并在 activated 钩子函数中将滚动位置设置为 this.scrollTop 的值，即前一个页面保存的滚动位置。在 deactivated 钩子函数中，我们将当前页面的滚动位置保存在 this.scrollTop 中，以便在下次进入该页面时使用。