DEV Community

Cover image for Navigating to a specific section/div with unique ID of a page in vue/quasar
George Ikwegbu Chinedu
George Ikwegbu Chinedu

Posted on

1

Navigating to a specific section/div with unique ID of a page in vue/quasar

scrollBehavior

This will help you seamlessly navigate to a section with a specific ID, on an SPA.
Simply include the code in the image to your router.js or main.js or app.js , wherever your vueRouter middleware was used.

Explaining the lines of code

line-21: This is the scrollBehavior function, which takes in three ( 3 ) arguments.
a. The 'to' which specifies the next routing page
b. The 'from' which specifies the previous routing page
c. The 'savedPosition' which specifies the position of the screen observer of the 'from' before moving to the 'to'. This is useful, assuming the user clicks on back or forward button.

line-22: This is an if statement which if it's truthy, evaluates the block of code beneath it.
NB: since you would probably configure you link to the specified page as "localhost:8080/main/profile/georgeIkwegbu#ilovevueandquasar"
then the '.hash' detects that the 'to' routing page contains a hashed parameter, and hence evaluates the if statement in line-22

line-23 and line-24: This returns the selector with the value of the hashed parameter ( i.e the unique ID found in the url )

line-27: This is used to detect the previous position of the 'from' page, assuming the user clicks back or forward.

line-30: This returns a default x-axis value of 0-px and y-axis of 0-px, meaning if there are no hashed parameter in the url ( both on the 'to' and 'from' then a next page on the router will be positioned on the top-left view of the viewport.

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs