scrollbehavior savedposition - how does it work?
-
Hey guys,
coming from angular/ionic I am having a little trouble to understand the right setup.By default my quasar apps behave like this:
- create a popstate navigation
- open a page and scroll far down
- navigate forward (popstate) and hit browsers back button
- end up on previous page but at top not as (expected) scrolled Position
I tried a few things so far like:
- quasar.conf.js activating vueRouterMode: ‘history’,
- changed router/index.js to:
const Router = new VueRouter({ //scrollBehavior: () => ({ x: 0, y: 0 }), scrollBehavior: (to, from, savedPosition) => new Promise((resolve) => { const position = savedPosition || {}; if (!savedPosition) { if (to.hash) { position.selector = to.hash; } if (to.matched.some((m) => m.meta.scrollToTop)) { position.x = 0; position.y = 0; } } Router.app.$root.$once('triggerScroll', () => { Router.app.$nextTick(() => resolve(position)); }); }), routes,
sadly those two did not do the trick. I am pretty sure that is a basic misunderstanding in regards to vue on my end.
Anyone able to help me get back on track? -
@pureblood When ever possible I use Vue’s <keep-alive>.
<q-page-container id="main-page-container"> <transition enter-active-class="animated fadeIn"> <keep-alive> <router-view> </router-view> </keep-alive> </transition> </q-page-container>
This way the components are not recreated every time you navigate to them and retain their scroll position. I am not sure if it is the correct way mind but for me it works. In fact I wonder why this is not the default behaviour … maybe others can explain?