实现一个动态改变的页面布局
最后更新：2020/12/03/ 22:37:15
如果要实现这个功能，我们就需要去写一个layout布局的文件，然后通过一个动态的设置去响应这个变化。
这个问题其实可以分两个方面去解析：
- 布局文件怎么去做
- 怎么去响应设置
布局文件
对于写一个布局文件，其实也不是很难，但是就是不要钻牛角尖，就好比，你可能会去想，一个侧边栏导航要怎么变成顶栏的横向导航？
其实这种想法太过于钻牛角尖，为什么我们不能做两个导航呢？
侧边栏sidebar我们使用一个导航，header里面我们也放一个导航，然后v-if判断不就好了。
没必要想那么复杂，很多东西就是组件化，响应式数据进行显示。
而且很多框架都预设了一些布局，我们可以利用那些布局，然后针对性的操作，大部分框架对这个些布局都考虑到了，比如说这个侧边栏本来有，我设置让他不显示，那么相对的他的相邻元素的宽度，都会有对应的变化适应。
布局文件配合插槽使用。
怎么去响应数据
一般来说，有两种方式，一种就是vuex，简单粗暴，配合持久化插件，基本上每次都能很完美的使用。
第二种的话，就考虑演示问题，比如我们可能要将这个布局分享个别人，这样当别人打开你分享的链接时，你们的布局是相同的，针对这种情况，我们可以考虑使用路由参数query。
以为vue-router支持只传参，不改变路由，所以我们可以每次设置的时候push传入配置参数。
但是这样会衍生出一个问题，就是会触发路由守卫，如果你在路由守卫设置了一个响应变化，如：进度条
那么你就需要去做个判断，如果进入的是同一个路由，就不触发进度条事件。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 2
Colin
QQ Browser Android木灵鱼儿
FireFox Windows 10