vue实现nuxt的动态布局Dynamic Layout

木灵鱼儿 2024-06-23 17:46 1107 阅读3分钟

前言

最近在写新的项目，其中遇到一个问题，我的登录页和注册页相关的页面，他们的布局是相同的，所以理所当然的封装了一个layout组件，然后每个页面自己import引入它并使用，这么看其实没有问题。

但是当我给layout增加了一个持久的动画的时候，切换页面由于组件会重新渲染，这就导致动画又重新开始了，显得整体非常突兀。

于是不得不将layout组件提升到route-view路由视图的外层，然后又要考虑其他layout布局也要生效，于是就有了仿nuxt的动态布局的需求。

我希望在路由的meta配上一个layout属性，然后通过这个属性指定对应的布局组件。

此处内容已隐藏回复后方可阅读。