vue-router 中的 next() 保护功能如何工作?

Question

我试图在这篇SO帖子中理解解决方案。该解决方案允许用户跟踪当前路线中的先前路线。

下面是我试图理解的 Vue 代码片段。如果我理解正确，next接受接收当前组件的 vue 实例的回调函数。然后，我们将这个 vue 实例的 prevRoute data 属性设置为 from 。这种解释正确吗？如果不是，实际发生了什么？

如果有人还可以添加关于 Vue API 在幕后做什么的简要解释，这也对我实际理解代码片段非常有帮助。

...
data() {
 return {
   ...
   prevRoute: null
 }
},
beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.prevRoute = from
  })
},
...

Answer 1

根据文档...

beforeRouteEnter守卫无权访问this，因为在确认导航之前调用了守卫，因此新的进入组件甚至还没有被创建。

但是，您可以通过向 next 传递回调来访问实例。确认导航时会调用回调，组件实例会作为参数传递给回调

因此，分配给目标路由的组件实例vm。

---

从你的问题...

然后，我们将这个 vue 实例的 prevRoutedata 属性设置为 from。这种解释正确吗？

几乎。你所做的只是在 Vue 组件上设置一个直接对象属性，毕竟，它本质上只是一个 JavaScript 对象。例如

const vm = { name: 'I am totally a Vue component' }
vm.prevRoute = from

这个属性不会是反应式的，但你当然可以通过this在组件中访问它，就像你可以访问其他非数据属性，如$el、$refs等一样。