<template> <div id="app"> <transition :name="transitionName"> <keep-alive > <router-view v-if="$route.meta.keepAlive" class="Router"></router-view> </keep-alive> </transition > <transition :name="transitionName"> <router-view v-if="!$route.meta.keepAlive" class="Router"></router-view> </transition > <Play></Play> </div></template><script>import Play from './components/play'export default { name: 'App', data () { return { transitionName: 'slide-left' } }, watch: { '$route' (to, from) { // 切換動畫 let isBack = this.$router.isBack // 監聽路由變化時的狀態為前進還是后退 if (isBack === true) { this.transitionName = 'slide-right' // from.meta.keepAlive = false // to.meta.keepAlive = true } else { // from.meta.keepAlive = true // to.meta.keepAlive = false // this.transitionName = 'slide-left' if (this.$route.path.split('/').length < 3) {  this.transitionName = 'slide-fade' } else {  this.transitionName = 'slide-left' } } this.$router.isBack = false } }, components: { Play }}</script><style>.Router { font-family: Roboto, Lato, sans-serif; position: absolute; width: 100%; height: 100%; padding-bottom: 60px; transition: all .377s ease; box-sizing: border-box; overflow: auto;}.slide-left-enter,.slide-right-leave-active { opacity: 0; -webkit-transform: translate(100%, 0); transform: translate(100%, 0);}.slide-left-leave-active,.slide-right-enter { opacity: 0; -webkit-transform: translate(-100%, 0); transform: translate(-100% 0);}.ovf { overflow: hidden;}.center { width: 95%; margin: 0 auto; overflow-y: hidden;}li { list-style: none;}</style>

{ path: '/playListDetail/:id', name: 'playListDetail', component: pather => require(['../components/playListDetail.vue'], pather), meta: { title: '歌單詳情', keepAlive: true, isBack: false } },

back () { this.$router.go(-1) this.$router.isBack = true }