I'm currently in the process of developing a mobile frontend using Vue. My goal is to have route transitions dynamically change to slide either left or right based on the current tab index.
To accomplish this, I've set up a transition component in my App.js that switches the transition depending on the route like so:
<transition :name="$route.meta.transition" mode="out-in">
My approach involves setting up a beforeEach hook on each route change to modify both the current route's meta.transition and the target route's .meta.transition.
Below are the route definitions:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/routines',
name: 'routines',
component: () => import('../views/Routines/IndexView.vue'),
meta: { transition: 'slide-right', index: 0 }
},
...
]
})
Here is the hook I'm implementing to replace the to and from routes with modified routes containing the appropriate transition string:
router.beforeEach((to, from, next) => {
console.log(to, from)
if (to.meta.index < from.meta.index) {
console.log({...to, meta: {...to.meta, transition: 'slide-left'}})
router.addRoute({...to, meta: {...to.meta, transition: 'slide-left'}})
console.log({...from, meta: {...from.meta, transition: 'slide-left'}})
router.addRoute({...from, meta: {...from.meta, transition: 'slide-left'}})
}
next()
})
However, I encountered an issue where the to and from parameters do not contain the component keys I previously defined. This resulted in an error when replacing routes using addRoute and then navigating back: Error: Invalid route component
I confirmed that the to and from objects are indeed invalid routes:
https://i.sstatic.net/M58A2.png
How can I resolve this problem to achieve the desired dynamic sliding behavior? I believe the hook strategy I adopted makes sense. In the future, I plan to implement additional logic to enable child pages to zoom in and out when transitioning between parent and child pages.
Thank you!