<template> <page-switch :type="pageSwitchType"> <template slot-scope="slot"> <keep-alive include="keep-alive-router-view"> <keep-alive-router-view v-if="$route.meta.keepAlive" :style="slot.styleObj" :type="pageSwitchType"></keep-alive-router-view> <router-view v-else :style="slot.styleObj"></router-view> </keep-alive> <!--<keep-alive>--> <!--<router-view :style="slot.styleObj"></router-view>--> <!--</keep-alive>--> </template> </page-switch> </template> <script> import PageSwitch from '@/public/transition/page-switch/index.vue' export default { components: { PageSwitch, KeepAliveRouterView: { name: 'keep-alive-router-view', //这里也必须再次应用过渡效果，否则在两个keep-alive页面间切换时，将只会看见进入的元素过渡，离开的元素直接移除了。这是因为transition只会对子级对v-if/else有作用，不能跨级作用 template: '<page-switch :type="$attrs.type"><template slot-scope="slot"><keep-alive><router-view :style="slot.styleObj"></router-view></keep-alive></template></page-switch>', components: { PageSwitch } } }, data () { return { pageSwitchType: undefined } }, watch: { $route () { if (!history.state || !history.state.visitTime) { // 新建历史记录，前进 history.replaceState(Object.assign({}, history.state || {}, { visitTime: Date.now() }), '') /** * 第一次不过渡，因为router-view包含的页面组件是异步渲染的，vue将其作为非appear处理 * https://github.com/vuejs/vue-router/issues/657 */ this.pageSwitchType = this.pageSwitchType === undefined ? '' : 'cover' } else if (!this.visitTime || history.state.visitTime === this.visitTime) { // 刷新或者replace this.pageSwitchType = this.pageSwitchType === undefined ? '' : 'cover' } else if (history.state.visitTime < this.visitTime) { // 后退 this.pageSwitchType = this.pageSwitchType === undefined ? '' : 'cover-reverse' } else { // 前进 this.pageSwitchType = this.pageSwitchType === undefined ? '' : 'cover' } this.visitTime = history.state.visitTime } } } </script>
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复