you want to achieve the effect of native stack, but the routing of vue is based on h5 history. Online thinking:
stack is not a very good solution. Normally, if you enter the list page from the home page, it will be OK to return, but there will be a problem when the list page is refreshed directly and then go back to the home page.
so one solution is to define several arrays, define the transition order of possible pages from front to back, and then traverse these arrays when the route changes. Find the order of the two routes in the array to decide which animation to use
I just did an app project and used this method.
you can customize a meta index, in app.vue, to compare the current index and from index, to add to transition from slide-right or slide-left.
< H1 > app.vue < / H1 >
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
transitionName: ''
}
},
watch: {
$route(to, from) {
if (to.meta.index > 0) {
if (to.meta.index < from.meta.index) {
this.transitionName = 'slide-right'
} else {
this.transitionName = 'slide-left'
}
} else if (to.meta.index === 0 && from.meta.index > 0) {
this.transitionName = 'slide-right'
}
}
}
}
< H2 > router < / H2 >
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: resolve => require(['../page/home'], resolve),
meta: {
index: 0
}
},
{
path: '/center',
name: 'center',
component: resolve => require(['../page/center'], resolve),
meta: {
index: 1
}
},
{
path: '/account',
name: 'account',
component: resolve => require(['../page/account'], resolve),
meta: {
index: 2
}
}
]
})
< H2 > Route switching Animation < / H2 >
.child-view {
position: absolute;
width: 100%;
height: 100%;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 0.45s ease-out;
position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate(-100%, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate(0%, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate(100%, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate(0%, 0);
}
