vue.js - 为什么使用 beforeRouteEnter 而不是mounted？

Question

为什么 beforeRouteEnter导航守卫存在于 vue-router 中吗？是否有 beforeRouteEnter 的情况？将被解雇，但 mounted不会是？如果不是，在什么情况下您更愿意使用 beforeRouteEnter至mounted ?

Answer 1

mounted是任何 Vue 组件的生命周期钩子(Hook)，它总是会被触发。 beforeRouteEnter 的想法或由 vue-router 添加的任何其他生命周期 Hook 是让您控制您的应用程序。

例如，假设您有一条名为 bar 的路线。它有一个非常具体的验证逻辑，只有在之前的路由是 foo 时才允许用户输入。 ，您可以在这个钩子(Hook)中插入验证逻辑，而不是检查全局守卫中的每个路由更改。

export default {
  name: 'Bar',
  beforeRouteEnter(to, from, next) {
    if (from.name === 'foo') {
      next(); // Calling next allow the route to proceed
    } else {
      next(false); // Don't allow the navigation
      // or
      next({
        name: 'foo',
        query: {
          from: 'bar'
        }
      }); // Redirect to any desired route as navigation made in $router
    }
  }
}