为什么要使用beforeRouteEnter而不是挂载?

时间:2018-10-12 20:24:47

标签: vue.js vue-router

为什么vue-router中存在beforeRouteEnter导航卫士?是否存在将触发beforeRouteEnter但不会触发mounted的情况?如果不是,在哪种情况下,您更喜欢使用beforeRouteEnter而不是mounted

1 个答案:

答案 0 :(得分:1)

mounted是任何Vue组件的生命周期挂钩,它将始终被触发。 beforeRouteEntervue-router添加的任何其他生命周期挂钩的想法是允许您控制应用程序。

例如,假设您有一个名为bar的路由,该路由具有非常具体的验证逻辑,只有先前的路由为foo时,该逻辑才允许用户输入,您可以插入该挂钩中的验证逻辑,而不是检查全局保护中的每个路由更改。

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
    }
  }
}