订单详情页优化：Vue中keep-alive的实践

2023-04-30 16:37:53

订单详情页优化：Vue 中使用 keep-alive 的实践

引言

在电子商务网站中，订单列表页和详情页是至关重要的页面。用户在列表页中查看所有订单信息，而在详情页中查看特定订单的详细信息。用户从列表页跳转到详情页，再返回列表页时，通常希望页面保留在之前的浏览位置。然而，由于重新调用接口导致页面重新渲染，滚动条位置也会重置，给用户带来不便，每次返回都需要重新下拉。

Vue 中的 keep-alive 组件

为了解决这个问题，我们可以使用 Vue 中的 keep-alive 组件。keep-alive 组件可以缓存组件状态，在组件切换时不会销毁组件实例，而是将其挂起。这样，当用户从详情页返回到列表页时，列表页的组件仍然处于挂起状态，页面可以保留在之前的浏览位置。

使用 keep-alive 实现订单详情页优化

以下是如何使用 keep-alive 组件实现订单列表页和详情页之间跳转时保持滚动位置不变：

在列表页路由中添加 keep-alive 参数：

{
  path: '/orders',
  name: 'Orders',
  component: Orders,
  keepAlive: true
}

在详情页路由中添加 keep-alive 参数：

{
  path: '/orders/:id',
  name: 'OrderDetail',
  component: OrderDetail,
  keepAlive: true
}

在列表页组件中，使用 keep-alive 包裹订单列表组件：

<keep-alive>
  <order-list></order-list>
</keep-alive>

在详情页组件中，使用 keep-alive 包裹订单详情组件：

<keep-alive>
  <order-detail></order-detail>
</keep-alive>

在列表页组件中，在组件切换时触发一个事件：

export default {
  methods: {
    onComponentChanged() {
      this.$emit('component-changed');
    }
  }
}

在详情页组件中，监听列表页组件发出的事件，并在事件触发时滚动到列表页组件的指定位置：

export default {
  methods: {
    onComponentChanged() {
      this.$nextTick(() => {
        this.$refs.orderList.scrollTo(0, this.scrollTop);
      });
    }
  },
  mounted() {
    this.$on('component-changed', this.onComponentChanged);
  },
  beforeDestroy() {
    this.$off('component-changed', this.onComponentChanged);
  }
}