Vue Router组件内路由钩子的使用

beforeRouteEnter(to, from, next) {
  // 不能访问 this
  next(vm => {
    // 通过 vm 访问组件实例
  })
}

export default {
  name: 'UserProfile',
  beforeRouteEnter(to, from, next) {
    // 验证用户权限
    if (!localStorage.getItem('isAuthenticated')) {
      next('/login') // 重定向到登录页
    } else {
      next() // 允许进入
    }
  }
}

beforeRouteUpdate(to, from, next) {
  // 可以访问 this
  this.userData = null
  this.fetchUserData(to.params.id)
  next()
}

export default {
  name: 'UserProfile',
  data() {
    return {
      user: null
    }
  },
  methods: {
    fetchUser(id) {
      // 获取用户数据
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 当路由参数变化时重新获取数据
    if (to.params.id !== from.params.id) {
      this.user = null
      this.fetchUser(to.params.id)
    }
    next()
  }
}

beforeRouteLeave(to, from, next) {
  // 可以访问 this
  if (this.unsavedChanges) {
    if (confirm('您有未保存的更改，确定要离开吗？')) {
      next()
    } else {
      next(false) // 取消导航
    }
  } else {
    next()
  }
}

export default {
  name: 'EditPost',
  data() {
    return {
      unsavedChanges: false
    }
  },
  watch: {
    formData: {
      deep: true,
      handler() {
        this.unsavedChanges = true
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.unsavedChanges) {
      const answer = window.confirm(
        '您有未保存的更改，确定要离开吗？'
      )
      if (answer) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  }
}

export default {
  name: 'AdminDashboard',
  beforeRouteEnter(to, from, next) {
    // 检查用户权限
    api.checkAdminPermission().then(hasPermission => {
      if (hasPermission) {
        next()
      } else {
        next('/forbidden') // 无权限则跳转到禁止访问页面
      }
    }).catch(() => {
      next('/login') // 出错则跳转到登录页
    })
  }
}

export default {
  name: 'ProductDetail',
  data() {
    return {
      product: null,
      loading: false
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在进入路由前获取数据
    api.getProduct(to.params.id).then(product => {
      next(vm => {
        vm.product = product // 数据预加载
      })
    }).catch(() => {
      next('/not-found') // 产品不存在则跳转到404页面
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 路由参数变化时重新获取数据
    this.loading = true
    api.getProduct(to.params.id).then(product => {
      this.product = product
      this.loading = false
      next()
    }).catch(() => {
      next(false) // 保持当前视图
    })
  }
}

export default {
  name: 'OrderForm',
  data() {
    return {
      form: {
        items: [],
        address: ''
      },
      isDirty: false
    }
  },
  watch: {
    form: {
      deep: true,
      handler(newVal, oldVal) {
        if (!this._inited) {
          this._inited = true
          return
        }
        this.isDirty = true
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.isDirty) {
      this.$confirm('您有未保存的更改，确定要离开吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        next()
      }).catch(() => {
        next(false)
      })
    } else {
      next()
    }
  }
}

beforeRouteEnter(to, from, next) {
  next(vm => {
    // 通过 vm 访问组件实例
    vm.doSomething()
  })
}

beforeRouteUpdate(to, from, next) {
  if (to.params.id !== from.params.id) {
    this.fetchData(to.params.id)
  }
  next()
}

beforeRouteEnter(to, from, next) {
  someAsyncOperation().then(() => {
    next()
  }).catch(error => {
    next(false) // 或跳转到错误页面
  })
}