[Vuejs]-Problem with ionic/vue router animation bleeds

by

0👍

✅

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
    }
  },
  // ...
]

Leave a comment