Page Name is not accurately capturing the correct page

[engineer_kt]

I'm finding that my PageName variable is not reading the correct value. The app is a SPA Vue app, in Launch, the PageName is set as "%Path%%Hash%" and the Page Url is set as "%URL%".

What is happening is for example I am on my /pay/verify page, when I click on a link with an analytics call, the page name is supposed to register as "/pay/verify" however, it is reading as the next page that I arrive at, say "/pay/method" instead. In the click handler for the link, I have:
 

chooseVerificationOptions() { this.router.push({ name: ROUTES.METHOD })

What is the cause of this and what can I do? I can capture the current page name with window.location.pathname in my code. Can I pass this to a variable and send this to PageName directly? Any help is greatly appreciated. Thanks.

[Pablo_Childe · Accepted solution]

For SPA I would use a direct call rule to indicate page navigation change(virtual pageview).

Then in data layer populate the pagename variable page to page. This way a beacon is set per page movement and not one step behind like you have now. It also allows for web browser reloads as well as back and forth arrows. The beacon method also allows you to enable button and link tracking to align with source page. SO when a link is clicked it is associated with correct originating page.(you don't need to make a seperate link click rule if using Activity Map)

Also another advantage of this methodology if the hash structure were ever changes the direct call rules would not be changed.