VueJS:如何从全局JS函数导航到不同的路由

Question

我有一个 Vue.js 应用程序，其中 a 有一个不是由 Vue 渲染的链接标签，我无法将运行时编译器添加到我的捆绑包中。

链接标签将指向已在 Vue 路由器注册的有效路由。 我希望能够在单击链接时软导航到路线(与<router-link />的行为基本相同(。

当前单击该链接会导致页面硬刷新。 有没有办法全局访问路由器？ 我的应用程序是使用 webpack 编译的。Vue实例目前在window上不可用，如果可能的话，我宁愿不公开它。

有什么建议吗？谢谢。

Answer 1

最好的方法可能是在window对象上注册一个hook并使用它，以便您可以从 Vue 内部导航。

像这样：

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

执行此操作后，您应该能够从任何像这样的 JS 脚本访问vueRouterHook

window.vueRouterHook('my path')

当然，如果需要，您可以向方法添加参数。