No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    scrollbehavior savedposition - how does it work?

    Help
    2
    2
    476
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      pureblood last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • T
        turigeza last edited by

        @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?

        1 Reply Last reply Reply Quote 0
        • First post
          Last post