1. 程式人生 > >vue元件內配置守衛阻止跳轉對應的元件

vue元件內配置守衛阻止跳轉對應的元件

注意 只能在配置路由對應的父元件路由上面定義
  beforeRouteLeave(to, from, next) {
    if (to.name == "grapredparack") {
    //如果要跳轉到 grapredparack 這個名字的路由元件上面的時候 如果是列表可以根據在上面迴圈設定的query.id獲取到對應的id
      this.http.post("/api/red/grab", { redis_id: to.query.id }).then(res => {
        if (res.code == 200) {
          if (res.status == "success") {
            this.$store.commit('userinfo',res.data)
            this.$toasted.success("搶紅包成功").goAway(1500);
            setTimeout(() => {
              this.$router.replace({ name: "redpacket" });
            }, 2000);
          }
          next();
        } else {
          next(false);
        }
      } ,err => {
        console.log(err)
        next(false)
       this.$toasted.error(err, { icon: "error" }).goAway(2000);
      });
    } else {
      next();
    }
  },