点点滴滴的总结

VUE相关

vueRouter路由守卫执行顺序

1. 【组件】前一个组件的 beforRouteLeave（有上一级时）
2. 【全局】的 router.beforeEach
3. 【组件】如果有路由参数变化（test => test/1），触发 beforeRouteUpdate
4. 【配置文件】里, 下一个的组件 beforeEnter
5. 【组件】内部声明的 beforeRouteEnter
6. 【全局】的 router.afterEach

进入或离开页面有些逻辑处理时一般会使用到路由守卫，除了以上的api应用，可以在独立的vue文件中使用watch监听$route变化

列表进入详情返回时保留位置

1、可以使用keep-alive
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

2、部分安卓机可能有兼容失效问题
const router = new VueRouter({
        mode: "history",
        routes, // 传入配置文件
        scrollBehavior(to, from, savedPosition) { 
            if (savedPosition && to.meta.keepAlive) { 
                return savedPosition; 
            }else{
                return{x:0,y:0}
            }
        }    
    });
问题：使用router-link返回时是无法记录位置，只有浏览器返回的行为才会记录

vue页面切换时增加一些渐变效果

<transition name="fade">
    <router-view class="child-view"></router-view>
</transition>

\\css

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.75s ease;
}
.fade-enter,
.fade-leave-active {
    opacity: 0;
}
.child-view {
    position: absolute;
    transition: all 0.75s cubic-bezier(0.55, 0, 0.1, 1);
}

webpack

1、webpack打包项目的时候，针对首屏加载优化，可以采用异步加载的方式，分割主题和组件JS文件
import('./moduls').then(res=>{})
同时这个方式是牺牲了一部分http请求的优化

2、webpack打包公共引入文件时，分离chunks文件（webpack4）

optimization:{
    splitChunks:{
        chunks:'all',
        minSize:0
    }
}