VueJS: How to navigate to a different route from global JS function

Question

I have a Vue.js app where a have a link tag that is not rendered by Vue, and I cannot add the runtime compiler to my bundle.

The link tag will point to a valid route that has been registered with Vue Router. I'd like to be able to soft navigate to the route (basically the same behaviour as <router-link />) when the link is clicked.

Currently clicking the link causes a hard page refresh. Is there a way of accessing the router globally? My app is compiled using webpack. The Vue instance is not currently available on the window, and I'd prefer not to expose it if possible.

Any suggestions? Thanks.

Radu Diță Radu Diță · Accepted Answer · 2020-06-26T07:42:25

Probably the best approach is to register a hook on the window object and use that so you can navigate from inside Vue.

Something like this:

//inside main.js or any other vue component that can get a reference to router
window.vueRouterHook = (path) => {
 router.push(path)
}

After this is executed you should be able to access vueRouterHook from any JS script like this

window.vueRouterHook('my path')

You can, of course, add params to the method if you want.

VueJS: How to navigate to a different route from global JS function

1 Answers