App.vue 1.26 KB
<template>
    <div id="app">
        <head-nav></head-nav>
        <transition >
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import Layout from './components/Layout/';
    export default {
        name: 'app',
        components: Layout,
        methods:{
            
        },
        mounted(){
            
        },
        watch:{
            $route(to,from){
                // console.log(to);
                if (!to.matched.length) {
                    this.$router.push('/404');
                }
            }
        }
    }
</script>
<style scoped lang='less'>
    .bounce-enter-active {
        animation: bounce-in .5s;
        -webkit-animation:bounce-in .5s;
    }
    
    .bounce-leave-active {
        animation: bounce-out .2s;
        -webkit-animation: bounce-out .2s;
    }
    
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            transform: scale(1);
        }
    }
    
    @keyframes bounce-out {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(0);
        }
    }
</style>