vue 路由跳转&部分页面缓存&页面动画切换

前言：此篇仅做记录。

• 上一下原先的代码，实现路由跳转&页面动画切换，没做页面缓存，每个页面都要刷新（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这两个生命周期函数就可以用啦