<template> <div> <transition :name="transitionName"> <keep-alive > <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> </transition > <transition :name="transitionName"> <router-view v-if="!$route.meta.keepAlive"></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('https://www.jb51.net/').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 }