4-结构体搭建

这里主要是切换路由的一个结构，不涉及菜单等结构，底部tab，设置切换的路由

路径锦集

image.png
image.png
image.png
image.png

获取某个组件的高度

image.png
image.png

ES6
变量：let
属性=值：简写成属性

1 Tab切换页面栏（页面切换栏）

1.1 组件目录
components：非路由组件（TabBar）
pages：路由组件（index/cat/cart/user）

image.png

1.2 切换条结构
div.tabbar>ul>( li>(img+p) ) * 4
1.3 切换条布局
ul:{flex}
li:{flex:1}

image.png
image.png
image.png

注意：line-height行高是指每一行文字的高度，不适用多行居中
只有这只了字体的大小，才能等比缩放，否则就是默认的
1.4 添加点击事件，修改路由地址

image.png
image.png

1.5 使用路由对象
router/index.js
1）导入路由
2）导入相关组件
3）声明在Vue中使用路由
4）对外暴露一个路由对象

image.png
1.6 使用组件TabBar
App.vue
1）导入组件
2）注册组件
3）设置组件出口
image.png

1.7 使用路由对象
main.js

1. 导入路由对象
   2）声明路由对象

   
   image.png

2 实现页面不占用切换工具条

App.vue（主页面的出口）
核心问题：切换条已经在页面上加载之后，才能获取它的高度和页面的高度
解决方法：生命周期函数

image.png
image.png
image.png