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?


Log in to reply