4.25 仿app书城 画龙点睛之日,距开始以正好1个月,感恩。

一、基本优化,以及路由配置keep-alive
1、首先,如果通过window.innerWidth,从而动态计算某个高度,那么只适用于移动端。pc端的话因为,如圣杯布局,则计算出现偏差。
解决方案:回想起去哪儿网的一个paddng-bottom强行比例撑开div盒子的方式。
在这里插入图片描述
经测试,可行。
2、关于keep-alive 对路由组件的使用,以及普通组件的使用。
普通组件(需要得到组件内name)
在这里插入图片描述
路由组件设置
在这里插入图片描述
不同的是,主路由组件 需配置两个router-view ,
1、若二级路由接收缓存,则keep-alive包裹。
2、若二级路由不接收缓存,则直接router-view,会刷新。

二、懒加载
1、路由懒加载,即通过webpackChunkName给路由组件打包入异步加载模块中。
在这里插入图片描述
2、图片懒加载(vue-lazyload)
入口文件,引入即使用。
在这里插入图片描述

3、keepAlive 不会二次触发mounted和created钩子,但可以触发 activated

4、/* */ 不一定是注释
服了,我一直以为在文件中/**/代表注释,后来今天切换环境变量时,发现 环境变量中/* */中的代码依然会执行。
在这里插入图片描述vue编译时 由上而下 ,依然会执行到16行,无底大坑啊。
5、路由跳转动画(简易指针式)
在这里插入图片描述6、将div内的滚动条,置于指定位置用 scrollTo
(pc端完美兼容,移动端需要scrollTop,但目前我未解决,先暂留)

猜你喜欢

转载自blog.csdn.net/qq_40196738/article/details/89509142
今日推荐