一、基本优化,以及路由配置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,但目前我未解决,先暂留)