vue.js - 从路由导航时如何在vue中调用函数？

Question

我正在尝试调用一个函数，在用户离开当前页面时清除本地存储。我将如何做到这一点？我尝试使用 destroyed() 生命周期 Hook ，但它没有用。使用 beforeRouteLeave() 会是一个很好的解决方案吗？我将如何在我的路由文件中实现它？

我的路线:

  {
    path: "/success",
    name: "Success",
    component: () =>
      import("../views/Success.vue"),
  },

我在当前成功页面上的钩子(Hook):

  destroyed() {
    window.localStorage.removeItem("intent");
  },

我尝试使用 beforeRouteLeave

  beforeRouteLeave: function(to, from, next) {
    window.localStorage.removeItem("intent");
    next();
  },

我的 Hook

let intent = window.localStorage.getItem(intent);
    // const product = window.localStorage.getItem(product);

    axios
      .get("http://localhost:5000/pay/confirm", {
        params: {
          intent: intent
        }
      })
      .then(res => {
        console.log(res.data.status);
        if (res.data.status == "succeeded") {
          console.log(res.data.status);
          this.confirmPayment();
        } else {
          this.paid = false;
        }
        console.log(this.item);
      });
  },

Answer 1

你可以尝试为你设置(全局/页面)观察者，当你路由对象改变时它会做一些事情

watch:{
    $route function(to, from){
        // do something
    }
}