时间戳

首页 > 解决方案 > “书签”布局的方法

vue.js - “书签”布局的方法

问题描述

我不太确定在 Web 开发中这种东西是否被称为“书签”布局。我将在下面的屏幕上进行解释。 在此处输入图像描述

我想实现这样的目标并且缺少如何做到这一点的知识。有人能指出我应该在哪里锚定吗？我在网络上找不到任何东西/可能正在使用不好的短语。

该组件将成为应用程序的一部分，在我们推送到路由器路径后，它将显示这种布局。基本上我可以实现这个购买，不断为每个页面推送不同的路线，但是如果这些页面属于“一个模型组件”，我不想在切换它们时一直重新加载它们，只是在我们进入每个页面后一次. 它就像移动应用程序 (iOS) 中的标签栏一样工作。

标签： vue.jsvuejs2vuexnuxt.js

解决方案

在许多 UI 上下文（例如浏览器、macOS 应用程序等）和 Web 开发中，您所说的“书签布局”简称为选项卡（例如您还提到的 iOS 选项卡栏）。

我不想在切换它们时一直重新加载它们

<keep-alive>Vue 为您提供了此类用例的内置组件：

当包裹在动态组件上时，<keep-alive>缓存不活动的组件实例而不破坏它们。

请参阅 Vue 指南：https ://vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components

但是，在这些组件之间切换时，有时出于性能原因，您可能希望保持它们的状态或避免重新渲染。[…]

<keep-alive>为了解决这个问题，我们可以用一个元素包裹我们的动态组件

推荐阅读