是否可以从Vue路由器获取触发路由更改的点击元素？

Question

我有一个按钮可以触发我的 Vue 应用程序中的路由更改。我希望按钮元素可以在组件的 $route 对象中作为路由更改的“事件目标”访问（类似于单击事件中的 event.target）。

这可能吗？

如果不是，获取路由更改原因的最佳方法是什么？

Answer 1

您正在寻找 Navigation Guards。有

• Global navigation guards 在每条路线上调用 beforeEnter/resolve/leave/after取决于你的守护类型 用过。
• Per-route navigation guards 用于您的 路由器文件，在每个路由的声明中。
• In-Component 在组件内部使用的 Guards。

您可以在 In-Component Guard beforeRouteLeave(to, from) 中获取导致组件中路由更改的特定按钮。这个特定的守卫可以访问具有所有道具和反应状态（包括按钮引用）的组件的 this。

---

根据文档，这就是每个守卫落入 导航流程 操作的方式：

• 导航触发。
• 在停用的组件中调用 beforeRouteLeave 守卫。
• 呼叫全局 beforeEach 守卫。
• 在重复使用的组件中调用 beforeRouteUpdate 守卫。
• 在路由配置中调用 beforeEnter。
• 解析异步路由组件。
• 在激活的组件中调用beforeRouteEnter。
• 呼叫全局 beforeResolve 守卫。
• 导航已确认。
• 调用全局 afterEach 挂钩。
• DOM 已触发更新。
• 在 beforeRouteEnter 具有实例化实例的守卫中调用传递给 next 的回调。