前言：此篇仅做记录。
- 上一下原先的代码，实现路由跳转&页面动画切换，没做页面缓存，每个页面都要刷新（App.vue）
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="router-view"></router-view>
</transition>
</div>
</template>
<style>
*{margin: 0; padding: 0;}
<script>
export default {
data() {
return {
transitionName: ""
}
},
watch: {
'$route'() {
if(window.$isBack != null){
this.transitionName = window.$isBack ? 'slide-right' : 'slide-left'
}
}
}
}
</script>
<style scoped>
@import "./common/app.css";
@import "./common/layer.css";
@import "./common/iconfont.css";
#app {
width: 100%;
height: 100%;
overflow-x: hidden;
}
/* 切页动画 */
.router-view {
position: absolute;
top: 0;
width: 100%;
transition: all .3s ease;
}
.slide-left-enter,
.slide-right-leave-active {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
-webkit-transform: translate(-100%, 0);
transform: translate(-100% 0);
}
</style>
- 增加需求，部分页面返回时不刷新
尝试了以下代码（参考网上的），但是在页面切换时会出现重复动画
<transition :name="transitionName">
<keep-alive>
<router-view class="router-view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition :name="transitionName">
<router-view class="router-view" v-if="!$route.meta.keepAlive"></router-view>
</transition>
所以不行，不能使用两个transition包裹
考虑到用 include/exclude 属性，list, detail代表路由中name对应的名字（使用时需要给vue类的name赋值，否则 include/exclude会不生效。。。）
<template>
<div id="app">
<transition :name="transitionName">
<keep-alive include="list, detail">
<router-view class="router-view"></router-view>
</keep-alive>
</transition>
</div>
</template>
另外：在使用了keep-alive组件后，activated, deactivated这两个生命周期函数就可以用啦
