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

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.

Top comments (0)