<template> <div id="app"> <transition name="fade"> <router-view class="child-view"/> </transition> </div> </template> <script> export default { name: 'App', mounted(){ }, } </script> <style> #app { overflow: auto; -webkit-overflow-scrolling:touch; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; } html,body,#app{ width: 100%; overflow: auto; } *{ margin: auto; padding: auto; } .child-view { position: relative; width: 100%; min-height: 100vh; transition: all .5s; } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style>