<template>
<div>
<!-- <router-view id="router" /> -->
<loading :routename="isname" />
<router-view v-slot="{ Component }" id="router">
<transition :name="transitionName">
<keep-alive include="ProductList">
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
<TabBar
style="position: absolute !important; left: 0; right: 0; bottom: 0;height:60px;z-index:100"
/>
</div>
</template>
<script>
import TabBar from './components/tabbar.vue'
import { ref } from 'vue'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
import { Loading } from 'vant'
import loading from '@/components/loading'
export default {
name: 'Home',
components: {
TabBar,
[Loading.name]: Loading,
loading
},
setup () {
// const router = useRouter()
const route = useRoute()
const isname = ref(route.name)
const transitionName = ref('slide-left')
onBeforeRouteUpdate((to, from) => {
const { index: toIndex } = to.meta
const { index: fromIndex } = from.meta
console.log(toIndex, fromIndex, toIndex < fromIndex)
transitionName.value = toIndex < fromIndex ? 'slide-right' : 'slide-left'
console.log(transitionName.value)
isname.value = to.name
})
return {
transitionName,
isname
}
}
}
</script>
<style lang="scss" scoped>
#router {
height: calc(100vh - 50px);
overflow-y: auto;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
width: 100vw;
will-change: transform;
transition: all 500ms;
// position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
</style>