Issue
I'm building an ionic/vue app and I'm having a problem with the animation on logout. Animation stutters when moving from the main page to the authorization page
I think problem in router
const routes: Array<RouteRecordRaw> = [
{
path: '/auth',
name: 'auth',
component: FeatureAuthByLoginAndPassword,
meta: {
middleware: [guest],
},
},
{
path: '/pinCode',
name: 'pinCode',
component: FeatureAuthByPinCode,
meta: {
middleware: [pincode],
},
},
{
path: '/',
redirect: '/tabs/tab1',
},
{
path: '/tabs/',
component: TabsPage,
meta: {
middleware: [auth],
},
children: [
{
path: '',
redirect: 'tab1',
},
{
path: 'tab1',
component: () => import('@/pages/ActiveClaimsList.vue'),
},
{
path: 'tab2',
component: () => import('@/pages/AllClaimList.vue'),
},
{
path: 'tab3',
component: () => import('@/pages/ClaimsHistory.vue'),
},
],
},
this is how my routes look like
I logout from TabsPage to PinCodePage
const signOut = () => {
logout();
router.replace('/pinCode');
};
Solution
IMPORTANT: In my response, I am not familiar with the source code shown in the picture, so I can only assume that the intended purpose is to display a PIN pad (FeatureAuthByPinCode
) in the foreground, while the content visible in the background is the previous route's content (TabsPage
) that should not be displayed anymore.
Vue-Router: replace()
- not send a new request
- just replaces the current content with the next
- no record of it is made in the browser history
- back button loses its function (that would be the goal if you use replace)
- possible that due to caching, the content of the previous page remains visible (this is not the fault of the page, but of the browser)
Vue-Router: push()
- new entry is added to the browser history
- definitely does not interfere with the cache
- can use back button
Vue-Router: How to can disable current page cache on browser?
Use inhibitCache: true
in meta.
This can be helpful in cases where the page's content needs to be updated frequently without relying on the browser's cache. (maybe with replace()
using)
const routes = [
// ...
{
path: '/about',
component: ExampleAbout,
meta: {
// disable cache on about route
inhibitCache: true
}
},
// ...
]
Answered By - rozsazoltan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.