关于前端:是的这里有3种使用Vue-3创建多布局系统的方法

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

布局是中大型网站或利用的根底。

假如你正在创立一个网页利用，它包含主页、营销页面和利用页面：

• 心愿主页领有独特的布局
• 心愿您的营销页面有侧边栏或其余任何货色
• 心愿您的利用页面具备常见的元素，如正告音讯、谬误音讯、特定的题目、导航等等

你不会想要为每一页反复所有的工作，对吧？

与 Nuxt 不同，Vue 3 并没有内置的布局零碎，然而别放心，这里将向你展现 3 种简略的办法来实现这一点。

1. 将布局导入为惯例组件以创立布局零碎

这是创立布局零碎的最简略办法，但其灵活性较差。为了简化解释，咱们就用我下面的例子来阐明吧。

咱们有 5 页：

• 首页（将有特定的布局）
• 对于和分割（将具备营销布局）
• Inside1 和 Inside2（将领有应用程序布局）

咱们将创立一个名为“layouts”的文件夹，在其中咱们将创立蕴含插槽的三个布局组件。

而后，你只需像这样在每个页面组件中导入你须要的布局：

这种办法存在两个次要问题：

1. 须要在每个页面中导入布局，当然，你能够将这些组件设为全局的，但你依然须要每次手动包装你的内容。
2. 每次路由更改时，布局都将被卸载并销毁，即便下一个路由应用雷同的布局。

这会对性能产生一点影响，但真正的问题是，即便它们应用雷同的布局，你也无奈在一个路由到另一个路由之间放弃状态。

2. 利用 Vue Router，路由的元属性，以及动静组件来创立布局零碎

为了防止在每个页面中导入布局，咱们能够抉择在路由器中一次性导入，而后为每个路由调配其关联的布局。

如此处所示，咱们间接将每个布局组件对象与每个路由的元数据属性关联。咱们只导入了一次所有的布局。

为了防止布局被卸载和毁坏，咱们将把布局放在页面之上，而不是放在页面外部。

为了将布局置于页面之上，咱们在 App.vue 组件中创立了一个动静组件。

在模板中，咱们能够通过 $route 拜访以后的路由，并且在每个路由上，咱们都能够拜访其元属性，这意味着咱们能够拜访之前设置的布局组件对象。

如果路由在元对象上没有布局属性，咱们将回退到应用 DIV 标签的字符串。

咱们只需导入一次布局，无需在每个页面中导入或包装布局，当初，咱们不会有性能问题，而且在从具备雷同布局的两个路由导航时，咱们能够放弃状态。

所以，我的主页组件当初看起来像这样：

无需再包装任何货色；所有的事件都在 App.vue 中解决，围绕的<router-view> 每当路由扭转时的每个页面。

这种办法在大多数应用场景中都无效，但它存在一个问题

布局只有在 route 扭转时才会变动。

如果你须要在不扭转路由的状况下动静扭转布局，那么这种办法将不起作用。只有在多数状况下，你可能会想要动静地扭转布局，但这是有可能产生的。

例如：

• 在一段时间后显示一个锁定的页面
• 为了显示一个离线页面
• 为了显示谬误页面

那些示例能够通过全屏 modal 零碎来实现，然而 modal 很容易通过控制台从 DOM 中删除。

3. 应用 ShallowRef，Provide，Inject 以及 Vue Router 的 afterEach 钩子来创立布局零碎

为了可能在任何中央更改布局，而不仅仅是在路由更改时，咱们须要在整个应用程序中共享布局的状态。

咱们能够应用 Vuex 或 Pina 来实现这个性能，但在这里咱们还是放弃简略吧。

咱们将应用 Vue 的原生响应性零碎，配合组合 api。

以下是步骤：

• 在 App.vue 中，咱们将创立一个布局常量，该常量蕴含一个 shallowRef 以保留以后的布局组件。
• 在一个独自的文件中，咱们将创立一个蕴含每个布局名称及其组件的键 / 值对的对象
• 在 App.vue 或其余中央，咱们将应用路由器的 afterEach 钩子来监听每次路由变动，以动静地扭转以后的布局。
• 在 App.vue 中，咱们将向其后辈提供布局常量，以便 App.vue 的树中的任何组件都能够注入布局常量来扭转其值。
• 在路由中，咱们将把元数据上的每个布局属性更改为仅蕴含要抉择的布局名称的字符串。

那么，这里是第二步，一个蕴含所有布局并作为对象展现的文件：

当初咱们也能够将路由中的元数据仅更改为字符串，因为它们将映射到上述对象：

当初让咱们把所有这些联合在一起：

咱们为什么应用 shallowRef 而不是 ref？

因为咱们正在存储一个组件，这是一个蕴含许多嵌套值的简单对象，应用 ref 会导致性能问题。

这也是不必要的，因为咱们只须要晓得整个组件何时产生了变动，而不是嵌套值何时产生了变动。

那么，咱们如何在路由器之外动静扭转布局呢？嗯，随处都能够！

以下是一个例子，展现了 Home 布局能够通过一键点击进行更改。

如你所见，咱们当初能够注入并拜访布局的状态，并将其更改为咱们想要的任何组件。多亏了响应性，它将动静地扭转 App.vue 中的组件。

如前所述，对于共享状态，咱们能够应用 Vuex 或 Pinia 来做同样的事件，但对于大多数状况来说，这曾经足够了。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。