Can I clear referrer upon refresh in Vue app built with Vue-router

A web page redirects to a Vue app. This Vue app has several pages and it uses Vue-router. Upon initialization of the Vue app we run some logic which is based on the referrer.

Then the user navigates between the pages of the Vue app and at some point decides to refresh the page. In this case the referrer is still the previous page (Why?) - thus the logic based on the referrer executes again. And this is problematic and shouldn't happen.

So - how can I get rid of this referrer after the SPA loads? Or eventually when user navigates inside the SPA?

PS: This happens on Chrome and Safari and doesn't on Firefox. At least on my machine.


There is a bunch of tricks to modify referrer (How to manually set REFERER header in Javascript?)

However all of them are far from perfect. That's because referrer is one of forbidden headers, which intentionally can't be modified programmatically (https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name)

In your case, the only idea I can think about is to put some key into localStorage or sessionStorage when you run your referer-related logic for the first time, and then prevent it from running again if this key is already stored.