How to set the scroll to top after navigating from one page to other in quasar-CodePudding

I have a qlist which when clicked by the user will be redirected to another page.However the scrolled position from the previous page remains the same and is not set to top. So the user has to scroll back to the top inorder to view the contents of the now navigated page. The following code has been used.

.vue file

      <q-item
        @Click.native = "scrollToTop"
        clickable
        
        active-
        id="mainTemplate"
        :to="{
          path: '/project/'   this.project.Id.toString()   '/template',
        }"
      >

.ts file (typescript)

 public scrollToTop() {
    window.scrollTo(0,0);
  }

routes.ts

const routes = [
  // PROJECT
  // -----
  {
    path: 'project/:projectId',
    name: 'project',
    component: () => import('layouts/masterSlave.vue'),
    props: {
      master: () => import('pages/projects/project/projectDesktop.vue'),
    },
    children: [
      {
        path: 'architecture',
        name: 'architecturePage',
        component: () => import('src/pages/projects/project/sections/architecture.vue'),
        props: {
          slaveLevel: 1,
        },
      },
      {
        path: 'template',
        name: 'templatePage',
        component: () => import('src/pages/projects/project/sections/template.vue'),
        props: {
          slaveLevel: 1,
        },
      },
   ]
 }
]

CodePudding user response：

You can do this in router.

https://router.vuejs.org/guide/advanced/scroll-behavior.html

scrollBehavior() {
            document.getElementById('app').scrollIntoView({ behavior: 'smooth' });
        }

scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
      }