vue3+ts学习笔记(1-5)项目layout布局
- 2026-03-06 02:23:38
vue3+ts学习笔记(1-5)项目layout布局对vue的单页面应用，进行layout布局，与router进行配合 仅对布局思路进行描述解释，如需查看代码请前往目录下vue3_ts项目内实际代码 ***vue存在多层页面处理，但也只有一个html页面*** 本次准备搭建的为横屏模式， 单页面应用框架布局大体分为三种模式， 横屏模式具体解释可参考下方了解 * 左侧菜单栏 * 右侧顶部区域 + 面包屑与个人信息 + 页面tab页签 * 右侧内容区域 * 顶部菜单栏 + 由左至右，logo+menu菜单+个人信息 + 页面tab页签 * 内容区域 * 顶部一级菜单栏 + 由左至右，logo+一级菜单+个人信息 * 左侧子级菜单栏 * 右侧内容区域 + 页面tab页签 + 页面内容 * 用来配合layout进行页面跳转与渲染 * [参考文档](https://cn.vuejs.org/api/built-in-special-elements.html#component) * 主要作用用于动态渲染组件，便于项目后期拓展layout使用，如：上方介绍的三种布局模式 * 对路由指向的页面进行页面输出渲染 * 对所嵌套包含的组件进行动画处理 * 对组件进行缓存处理 - 答：修复了默认布局文件 /src/layout/modes/default.vue 中的导航链接：将 href="#" 更改为 href="javascript:void(0)"，避免默认的锚点行为干扰路由跳转 - 答：子路由在渲染时，会优先渲染父路由，然后在router-view位置渲染自路由组件，当前问题是在配置两层layout布局时，在第二层路由布局处理时遇到， - 解决方法：取消子路由的使用，改为与父路由同级，但路由地址做处理（/studioApps/workflow）可参考项目路径src/router/route.ts - 答：在layout根组件，使用v-if进行条件判断用来分别渲染，使用store用来共享状态数据与函数，可参考项目路径src/store/modules/layout-store.ts **代码是死的人是活的，想要活学活用，首先需要理解layout的布局理念与vue router的路由渲染形式。 项目是千奇百怪的，所以布局模式也是随着项目的不同而不同，***理解思路*** 后就能随心所欲了，切勿照猫画虎，`切记！切记！` 以上仅做思路参考，而非像数学一样的公式。**
# 核心理念
页面入口第一层，public下index.html或根目录下index.html 页面入口第二层，app.vue,为挂载到html上的唯一节点内容 页面入口第三层，layout/index.vue为渲染在app.vue上的布局容器 页面入口第四层，routerView为路由渲染组件，主要用于渲染对应路由下的vue组件，也是最后一层的实际业务页面
# 本次搭建layout项目背景
-经典模式
-横屏模式
-混合模式
# 本次项目layout搭建使用到的技术点
- 1、vue中的vue Router路由组件
- 2、vue中的component组件
- 3、vue中的router-view组件
- 4、vue中的transition组件
- 5、vue中的keep-alive组件
# 常见问题
- 1、菜单导航配置完成，进行路由跳转时，首次跳转无反应，需第二次才可以正常进入？
- 2、子路由配置后，在router-view输出页面失败？
- 3、二级layout布局如何设计？
# 结语
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
